前端随心记---------小程序地图map组件应用

 简单实现小程序地图

　　官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

　　map.wxml:

<view>
    <map id="map" longitude="{{获取的坐标}}" latitude="{{获取的坐标}}" scale="14" show-location style="width: 100%; height: 300px;">
</map>
</view>

　　map.js:

Page({
  data: {
    markers: [{
      iconPath: "/resources/others.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color:"#FF0000DD",
      width: 2,
      dottedLine: true
    }],
    controls: [{
      id: 1,
      iconPath: '/resources/location.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  }
})

　由于map应用需要获取个人信息，需要设置信息

“permission”：{
     “scope.userLocation”:{
         “desc”：“你的位置将用于小程序地图展示”  //描述信息
    }    
}

 在页面加载时，调用获取地理位置API

wx.getLocation({
 type: 'wgs84',
 success (res) {
   const latitude = res.latitude
   const longitude = res.longitude
   const speed = res.speed
   const accuracy = res.accuracy
 }
})

关于分辨率rpx

来源：https://www.cnblogs.com/hudunyu/p/11983477.html