微信小程序 - 多地点标识(map)
2024-08-31 16:28:51
演示如下:
wxml
<map id="map" scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location style="width: 100%; height: 580px;"></map>
js
let hospitalData = require('hospitalData')
Page({
data: {
centerX: 0.0,
centerY: 0.0,
//可能我标识的地点和你所在区域比较远,缩放比例建议5;
scale:15,
markers: [],
controls: [{
id: 1,
iconPath: '/image/location-control.png',
position: {
left: 0,
top: 10,
width: 40,
height: 40
},
clickable: true
}]
},
onReady: function(e) {
// 使用 wx.createMapContext 获取 map 上下文
this.mapCtx = wx.createMapContext('myMap')
}, onLoad: function() {
console.log('地图定位!')
let that = this
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: (res) => {
let latitude = res.latitude;
let longitude = res.longitude;
let marker = this.createMarker(res);
this.setData({
centerX: longitude,
centerY: latitude,
markers: this.getHospitalMarkers()
})
}
});
}, /**
* 标示点移动触发
*/
regionchange(e) {
console.log(e.type)
}, /**
* 点击标识点触发
*/
markertap(e) {
console.log(e)
}, /**
* control控件点击时间
*/
controltap(e) {
console.log(e.controlId)
this.moveToLocation()
}, /**
* 获取医院标识
*/
getHospitalMarkers() {
let markers = [];
for (let item of hospitalData) {
let marker = this.createMarker(item);
markers.push(marker)
}
return markers;
}, /**
* 移动到自己位置
*/
moveToLocation: function() {
let mpCtx = wx.createMapContext("map");
mpCtx.moveToLocation();
}, /**
* 还有地图标识,可以在name上面动手
*/
createMarker(point) {
let latitude = point.latitude;
let longitude = point.longitude;
let marker = {
iconPath: "/image/location.png",
id: point.id || 0,
name: point.name || '',
latitude: latitude,
longitude: longitude,
width: 25,
height: 48
};
return marker;
}
})
hospitalData.js (模拟数据)
module.exports = [{
"id": 1,
"name": "永州市中心医院",
"longitude": "111.62852107566833",
"latitude": "26.42142999357519"
},
{
"id": 2,
"name": "永州市中医院",
"longitude": "111.5972679762268",
"latitude": "26.44470581245983"
}
]
运行示例时,建议放在同一目录下.
最新文章
- 前端学PHP之字符串函数
- Express4.x常用API(二):Request
- MySQL 加锁处理分析
- Linux-Apache+Mysql+PHP+PHPWind(重点Apache+PHP集成环境)
- asp.net ajax 调用错误解决
- English is very important!
- 【Swift】Runtime动态性分析
- SELinux与进程管理
- 自制操作系统Antz(10)——实现shell(上)
- Web API系列(三) 异常处理
- open函数新建文件报错
- [Scala] [Coursera]
- java 多线程(生产者消费者)
- linux gz 解压缩
- JMeter采用NON GUI模式时如何记录并查看错误
- C#简述(三)
- webapp的优化总结
- 虚拟机安装的Winserver 2008 R2系统,宿主机无法ping通主机
- 我的天$删除注册表$安装mysql最后一步不能启动服务的解决办法
- android系统提供的几种颜色Color