1.map組件的高度如果想要鋪滿屏幕，要是使用height:100vh樣式

2.獲取位置要在app.json中標明權限

3.先使用wx.getLocation獲取自己的位置，然后再回調中使用setData方法，賦予數據給前臺頁面展示標注點

index.js

//index.js//獲取應用實例const app = getApp()Page({ data: { }, onLoad: function () {  var self=this;  this.mapCtx = wx.createMapContext('myMap');  wx.getLocation({   type: 'gcj02',   success(res) {    self.setData({     latitude : res.latitude,     longitude : res.longitude,     markers: [{      id: 1,      latitude: res.latitude,      longitude: res.longitude,      iconPath: '/image/location.png',      callout:{       content:"服務:青少年英語培訓/r/n姓名:陶士涵/r/n電話:18808987876",       bgColor:"#fff",       padding:"5px",       borderRadius:"2px",       borderWidth:"1px",       borderColor:"#07c160",      }     },      {       id: 2,       latitude: res.latitude,       longitude: res.longitude+0.01,       iconPath: '/image/location.png',       callout: {        content: "服務:出租龍興園西區9號樓二單元501/r/n姓名:陶士涵/r/n電話:18808987876",        bgColor: "#fff",        padding: "5px",        borderRadius: "2px",        borderWidth: "1px",        borderColor: "#07c160",               }      }     ],    });   }  }) },})

index.wxml

<!--index.wxml-->  <map   id="myMap"   style="width: 100%; height:100vh;"   latitude="{{latitude}}"   longitude="{{longitude}}"   markers="{{markers}}"   covers="{{covers}}"   show-location  ></map>

app.json

{ "pages": [  "pages/index/index",  "pages/logs/logs" ], "window": {  "backgroundTextStyle": "light",  "navigationBarBackgroundColor": "#fff",  "navigationBarTitleText": "找服務",  "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json", "permission": {  "scope.userLocation": {   "desc": "你的位置信息將用于獲取周邊服務"   } }}

總結

以上所述是小編給大家介紹的微信小程序獲取位置展示地圖并標注信息的實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！