怎么锁定小程序地图可查看范围的经纬度代码
时间: 2023-05-29 14:05:16 浏览: 51
小程序地图可查看范围的经纬度代码需要在地图组件中进行设置。具体步骤如下:
1. 在 wxml 文件中添加地图组件代码:
```
<map id="myMap" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers="{{markers}}" show-location="{{showLocation}}" bindregionchange="regionchange" style="width: 100%; height: 100%;"></map>
```
2. 在 js 文件中设置地图的经纬度范围:
```
Page({
data: {
latitude: 23.099994,
longitude: 113.324520,
scale: 14,
markers: [{
id: 1,
latitude: 23.099994,
longitude: 113.324520,
name: 'T.I.T 创意园'
}],
showLocation: true
},
regionchange(e) {
console.log(e.type)
},
})
```
在上面的代码中,latitude 和 longitude 分别表示地图的中心经纬度,scale 表示地图的缩放级别,markers 表示地图上的标记点,showLocation 表示是否显示当前位置。
如果需要锁定地图的可查看范围,可以通过 regionchange 事件的回调函数来实现。在回调函数中,可以通过 e.causedBy 属性来判断地图的操作类型。如果是 drag 操作,就可以通过调用 mapCtx.getRegion 方法来获取地图的可查看范围,并对其进行限制。
下面是具体的实现代码:
```
Page({
data: {
latitude: 23.099994,
longitude: 113.324520,
scale: 14,
markers: [{
id: 1,
latitude: 23.099994,
longitude: 113.324520,
name: 'T.I.T 创意园'
}],
showLocation: true
},
regionchange(e) {
if (e.type === 'end' && e.causedBy === 'drag') {
const mapCtx = wx.createMapContext('myMap')
mapCtx.getRegion({
success: res => {
const { southwest, northeast } = res
const { latitude, longitude } = this.data
const diffLat = northeast.latitude - southwest.latitude
const diffLng = northeast.longitude - southwest.longitude
const newLat = latitude < southwest.latitude ? southwest.latitude : latitude > northeast.latitude ? northeast.latitude : latitude
const newLng = longitude < southwest.longitude ? southwest.longitude : longitude > northeast.longitude ? northeast.longitude : longitude
const newMarkers = this.data.markers.map(marker => {
const { latitude, longitude } = marker
const newMarkerLat = latitude < southwest.latitude ? southwest.latitude : latitude > northeast.latitude ? northeast.latitude : latitude
const newMarkerLng = longitude < southwest.longitude ? southwest.longitude : longitude > northeast.longitude ? northeast.longitude : longitude
return {
...marker,
latitude: newMarkerLat,
longitude: newMarkerLng
}
})
this.setData({
latitude: newLat,
longitude: newLng,
markers: newMarkers
})
}
})
}
},
})
```
在上面的代码中,我们首先通过 e.causedBy 判断地图操作类型是否为 drag,如果是则调用 mapCtx.getRegion 方法获取地图的可查看范围。然后根据地图的中心经纬度和可查看范围,计算出新的中心经纬度和标记点的位置,并更新 data 中的数据。最后在 wxml 文件中绑定 regionchange 事件即可。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)