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

前言

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

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

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

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

map屬性太多，先看一下：

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

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

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

wx.getLocation({
type:'wgs84',//默認為wgs84返回gps坐標，gcj02返回可用于wx.openLocation的坐標
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可自行看官網。

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

注意看示例圖的右上角，有兩個按鈕，加減號，是控制地圖scale的數值變化，動態縮放地圖的，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){
//設置map高度，根據當前設備寬高滿屏顯示
_this.setData({
view:{
Height:res.windowHeight
}

})



}
})

wx.getLocation({
type:'wgs84',//默認為wgs84返回gps坐標，gcj02返回可用于wx.openLocation的坐標
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)
}
})
},

//點擊縮放按鈕動態請求數據
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
})
//}
}


},


})

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。