前言
最近接了个跟微信小程序地图无关的开发工作，第一次在小程序上开发地图，既兴奋又忐忑。还好，尽管小程序地图的 API 性能有些少，然而根本的需要都能笼罩到。
在这里，对微信小程序地图开发的基本功能进行总结演绎。官网文档对地图属性、办法的演绎比拟到位，但不足示例代码，第一次搞还是有点迷糊的。网上的文章又写得七零八落，没见到有人专门总结演绎。
自己应用 React + Taro 开发的微信小程序，因而应用的是 Taro 提供的地图 API，然而和微信官网的是一样的，Taro 不过是二次封装而已。
相干链接：
- Taro Map 组件
- Taro Map 实例办法
- 微信官网文档 map
创立地图
引入 Map 组件，再像一般组件应用即可。能够增加很多属性，各个属性的作用详见 Taro 文档。
import { Map } from '@tarojs/components';class TaroMap extends Component { render() { <Map id="taroMap" longitude={100} latitude={90} show-location /> }}在地图画标记点
通过设置 Map 组件的 markers 属性，在地图上设置标记点。
标记点个别都须要设置这几个属性：
id：设置标记点的 idlongitude：设置标记点经度latitude：设置标记点纬度iconPath：设置标记点图标width：设置宽度height：设置高度
import { Map } from '@tarojs/components';import markerImg from './example.svg';class TaroMap extends Component { markers = [ { id: 0, iconPath: markerImg, longitude: 100, latitude: 20, width: 50, height: 50, }, { id: 1, iconPath: markerImg, longitude: 100, latitude: 20, width: 50, height: 50, }, ] render() { <Map id="taroMap" longitude={100} latitude={90} show-location markers={markers} /> }}在地图画圆圈
通过设置 Map 组件的 circles 属性，在地图上画圈。
圆圈个别都须要设置这几个属性：
longitude：设置圆圈核心经度latitude：设置圆圈核心纬度color：设置圆圈边缘色彩fillColor：设置圆圈填充色彩radius：设置圆圈半径，单位是米，这里是理论的半径大小
import { Map } from '@tarojs/components';class TaroMap extends Component { circles = [ { longitude: 100, latitude: 20, color: '#30BC6B', fillColor: 'blue', radius: 500, }, ] render() { <Map id="taroMap" longitude={100} latitude={90} show-location circles={circles} /> }}初始化地图核心为以后地位，并画圈
大部分地图都会在进入页面时把核心挪动到以后地位，同时会以以后地位为核心画一个圆圈。
该需要次要利用 getLocation() 办法来实现，getLocation() 办法能够获取以后的地理位置、速度等信息。
import { Map } from '@tarojs/components';class TaroMap extends Component { state = { longitude: 100, latitude: 90, circles: [], } componentDidMount() { this.getCurrentLocation(); } getCurrentLocation = async () => { const res = await Taro.getLocation({ type: 'gcj02' }); const { longitude, latitude } = res; this.setState({ longitude, latitude, circles: [{ longitude, latitude, color: 'red', fillColor: 'green', radius: 500 }], }); } render() { const { longitude, latitude } = this.state; <Map id="taroMap" longitude={longitude} latitude={latitude} show-location circles={circles} /> }}始终固定图标在地图核心
平时常见的地图，往往都会有一个图标固定在地图的核心，并且无论如何拖动地图，地位都始终不变。
在旧版的微信小程序地图中，这个性能须要应用 control 控件实现，但官网曾经明确阐明行将废除该形式。起初又通过利用视图容器 cover-view 来实现，然而 2023 年的当初连 cover-view 也不须要了，间接应用一般的 view 容器组件即可。
这样一来，就是很一般的设置元素程度垂直居中的问题了。
目前原生组件均已反对同层渲染，倡议应用 view 代替
import { Map, View, Image } from '@tarojs/components';class TaroMap extends Component { render() { <Map id="taroMap" longitude={100} latitude={90} show-location className="map" > <View className="center"> <Image className="center--image" src='./marker.png' /> </View> </Map> }}.map { width: 100vw; height: 100vh; position: relative;}.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.center--image { width: 70px; height: 70px;}返回以后地位
点击返回图标，让地图回到以后地位，简直是每个地图都必备的性能。而这个性能实现起来其实非常简单，首先调用 createMapContext() 创立一个地图实例对象，再调用地图实例的 moveToLocation() 办法将地图核心挪动到以后定位点即可。
handleBackCurrenLocation = () => { // 须要把地图的id传入 const wxMap = Taro.createMapContext(mapId); wxMap.moveToLocation({});}地图拖动展现不同的标记点
因为地图上的标记点可能会十分多，所以个别都不会一口气把所有的点都画到地图上，而是展现地图核心某个范畴之内的点。
拖动地图，再展现新的地图核心左近的标记点。
该性能的实现须要用到 onRegionChange 事件，当地图视线发生变化时会触发该事件，也就是拖动地图。像这种频繁触发的事件，最好防抖。
import _ from 'lodash'class TaroMap extends Component { // 防抖500毫秒 onRegionChange = _.debounce(async (e) => { const { type, detail } = e; // 拖动地图会触发两次onRegionChange事件，咱们只须要拖动完结时的事件 if (type === 'end') { const { centerLocation: { longitude, latitude } } = detail; // ...获取新的标记点 const markers = []; this.setState({ markers }); } } }, 500) render() { <Map id="taroMap" longitude={100} latitude={90} show-location className="map" onRegionChange={this.onRegionChange} > <View className="center"> <Image className="center--image" src='./marker.png' /> </View> </Map> }}结尾
小程序地图开发常见的性能需要就是这些啦。
微信小程序地图功能不多，然而外面的坑却不少，回头也总结一下。
更多内容，可见我的博客。