[小程序]微信小程序獲取位置展示地圖並標注信息

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電話:[phone]",
              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電話:[phone]",
                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": "你的位置信息將用於獲取周邊服務" 
    }
  }
}