這篇“微信小程序中怎么實現(xiàn)map地圖”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序中怎么實現(xiàn)map地圖”文章吧。

前言

微信小程序地圖操作比較簡單，api也很少，使用map組件來展示。說到地圖，那就先來看基礎(chǔ)定位：

定位用到wx.getLocation(OBJECT)函數(shù)，代碼如下：

wx.getLocation({
type:'wgs84',
success:function(res){
varlatitude=res.latitude
varlongitude=res.longitude
varspeed=res.speed
varaccuracy=res.accuracy
}
})

定位成功會返回四個參數(shù)值，如下：

map屬性太多，先看一下：

如果用到地圖，基本上所有屬性都會用到。

下面一一看一下，我們先看效果圖吧，先看真相：

這里我只用了一個markers，就是定位當(dāng)前位置的紅色markers，用法如下：

wx.getLocation({
type:'wgs84',//默認(rèn)為wgs84返回gps坐標(biāo)，gcj02返回可用于wx.openLocation的坐標(biāo)
success:function(res){

_this.setData({
latitude:res.latitude,
longitude:res.longitude,
markers:[{
id:"1",
latitude:res.latitude,
longitude:res.longitude,
width:50,
height:50,
iconPath:"/assests/imgs/my.png",
title:"哪里"

}],
circles:[{
latitude:res.latitude,
longitude:res.longitude,
color:'#FF0000DD',
fillColor:'#7cb5ec88',
radius:3000,
strokeWidth:1
}]

})
}

})

這里加了circles，半徑是3000米，具體的api可自行看官網(wǎng)。

接下來看看controls，控制層，在地圖上顯示控件，控件不隨著地圖移動，看API：

注意看示例圖的右上角，有兩個按鈕，加減號，是控制地圖scale的數(shù)值變化，動態(tài)縮放地圖的，controls用法也很簡單：

controls:[{
id:1,
iconPath:'/assests/imgs/jian.png',
position:{
left:320,
top:100-50,
width:20,
height:20
},
clickable:true
},
{
id:2,
iconPath:'/assests/imgs/jia.png',
position:{
left:340,
top:100-50,
width:20,
height:20
},
clickable:true
}
]

最后我們看一張gif圖：

最后上一下具體代碼：

wxml:

<mapid="map"longitude="{{longitude}}"latitude="{{latitude}}"scale="{{scale}}"controls="{{controls}}"bindcontroltap="controltap"markers="{{markers}}"circles="{{circles}}"bindmarkertap="markertap"polyline="{{polyline}}"bindregionchange="regionchange"show-location></map>

js:

Page({
data:{
Height:0,
scale:13,
latitude:"",
longitude:"",
markers:[],
controls:[{
id:1,
iconPath:'/assests/imgs/jian.png',
position:{
left:320,
top:100-50,
width:20,
height:20
},
clickable:true
},
{
id:2,
iconPath:'/assests/imgs/jia.png',
position:{
left:340,
top:100-50,
width:20,
height:20
},
clickable:true
}
],
circles:[]

},

onLoad:function(){
var_this=this;

wx.getSystemInfo({
success:function(res){
//設(shè)置map高度，根據(jù)當(dāng)前設(shè)備寬高滿屏顯示
_this.setData({
view:{
Height:res.windowHeight
}

})



}
})

wx.getLocation({
type:'wgs84',//默認(rèn)為wgs84返回gps坐標(biāo)，gcj02返回可用于wx.openLocation的坐標(biāo)
success:function(res){

_this.setData({
latitude:res.latitude,
longitude:res.longitude,
markers:[{
id:"1",
latitude:res.latitude,
longitude:res.longitude,
width:50,
height:50,
iconPath:"/assests/imgs/my.png",
title:"哪里"

}],
circles:[{
latitude:res.latitude,
longitude:res.longitude,
color:'#FF0000DD',
fillColor:'#7cb5ec88',
radius:3000,
strokeWidth:1
}]

})
}

})

},

regionchange(e){
console.log("regionchange==="+e.type)
},

//點擊merkers
markertap(e){
console.log(e.markerId)

wx.showActionSheet({
itemList:["A"],
success:function(res){
console.log(res.tapIndex)
},
fail:function(res){
console.log(res.errMsg)
}
})
},

//點擊縮放按鈕動態(tài)請求數(shù)據(jù)
controltap(e){
varthat=this;
console.log("scale==="+this.data.scale)
if(e.controlId===1){
//if(this.data.scale===13){
that.setData({
scale:--this.data.scale
})
//}
}else{
//if(this.data.scale!==13){
that.setData({
scale:++this.data.scale
})
//}
}


},


})

總結(jié)

以上是生活随笔為你收集整理的微信小程序中怎么实现map地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。