关于前端:一篇文章入门微信小程序地图开发

42次阅读

共计 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:设置标记点的 id
  • longitude:设置标记点经度
  • 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>
}
}

结尾

小程序地图开发常见的性能需要就是这些啦。

微信小程序地图功能不多,然而外面的坑却不少,回头也总结一下。

更多内容,可见我的博客。

正文完
 0