共计 3518 个字符,预计需要花费 9 分钟才能阅读完成。
前言
最近接了个跟微信小程序地图无关的开发工作,第一次在小程序上开发地图,既兴奋又忐忑。还好,尽管小程序地图的 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> | |
} | |
} |
结尾
小程序地图开发常见的性能需要就是这些啦。
微信小程序地图功能不多,然而外面的坑却不少,回头也总结一下。
更多内容,可见我的博客。