小程序地图怎么用？-猿码集

1. 小程序地图怎么用？

1.1 引入地图组件

在小程序开发过程中，首先需要引入地图组件。可以通过微信小程序官方提供的组件“map”来进行引入，代码如下：


<map id="map" longitude="{{ longitude }}" latitude="{{ latitude }}" show-location="true" />

其中，id属性是必填项，longitude和latitude属性是指地图中心点的经纬度，show-location属性是表示是否显示当前位置。

1.2 获取用户地理位置

要在地图上显示当前位置，首先需要获取用户的地理位置。可以通过微信小程序提供的API wx.getLocation来获取。代码如下：


wx.getLocation({
  type: 'gcj02',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    that.setData({
      longitude: longitude,
      latitude: latitude
    })
  }
})

其中，type属性是获取位置的类型，可以选择使用“wgs84”或“gcj02”坐标系，这里选择使用gcj02坐标系。

1.3 在地图上添加标记

在地图上添加标记，可以通过wx.createMarkerAPI来进行。代码如下：


var marker = [{
  iconPath: "/resources/others.png",
  id: 0,
  latitude: 23.099994,
  longitude: 113.324520,
  width: 50,
  height: 50
}]
that.setData({
  markers: marker
})

其中，iconPath属性是指标记的图标路径，id属性是唯一标识，latitude和longitude属性是坐标，width和height属性是标记的宽度和高度。

1.4 完整代码

下面是一个完整的小程序地图的示例代码：


//index.js
Page({
  data: {
    longitude: 113.324520,
    latitude: 23.099994,
    markers: [{
      iconPath: "/resources/others.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }]
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('myMap')
  }
})

其中，onReady事件是指页面初次渲染完成时触发的事件，可以在这里得到地图上下文，使用地图上下文继续操作地图。

2. 操作地图

2.1 地图移动

在开发中，经常需要通过代码来控制地图移动。可以通过地图上下文的translateMarker方法来实现。代码如下：


this.mapCtx.translateMarker({
  markerId: 0,
  autoRotate: true,
  duration: 1000,
  destination: {
    latitude: 23.10229,
    longitude: 113.3345211,
  },
  animationEnd() {
    console.log('animation end')
  }
})

其中，markerId属性是指要移动的标记的id，autoRotate属性是指标记是否自动旋转，duration属性是指移动动画的持续时间，destination属性是指目标点的坐标。animationEnd事件是指移动动画完成后触发的事件。

2.2 缩放地图

在实际开发中，经常需要对地图进行缩放。可以通过地图上下文的includePoints方法来实现。代码如下：


this.mapCtx.includePoints({
  padding: [10],
  points: [{
    latitude: 23.099994,
    longitude: 113.324520,
  }, {
    latitude: 23.00229,
    longitude: 113.3345211,
  }]
})

其中，padding属性是指缩放后的地图边缘与屏幕边缘的间隔距离，points属性是指需要显示在当前地图可视区域内的点的集合。

2.3 设置地图控件

在小程序地图中，也可以自定义地图控件。可以在js文件中通过调用小程序提供的API wx.getSystemInfoSync来获取手机屏幕的宽度和高度，然后计算出控件的位置和大小。代码如下：


var windowWidth = wx.getSystemInfoSync().windowWidth
var windowHeight = wx.getSystemInfoSync().windowHeight
this.setData({
  controls: [{
    id: 1,
    iconPath: '/pages/map/images/location.png',
    position: {
      left: windowWidth/2 - 20,
      top: windowHeight/2 - 50,
      width: 40,
      height: 40
    },
    clickable: true
  }]
})

其中，controls属性是指控件的组合，id属性是控件的唯一标识，iconPath属性是控件的图标路径，position属性是控件的位置和大小，clickable属性是指控件是否可以点击。

3. 总结

小程序地图的使用相对来说比较简单，可以通过引入地图组件、获取用户地理位置、添加标记、地图移动、缩放地图、设置地图控件等操作来实现各种地图功能。

此外，在使用小程序地图时，需要注意授权问题，需要在小程序的app.json文件中进行配置，否则无法获取地理位置。

小程序地图怎么用？