演示如下:

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"
}
]

运行示例时,建议放在同一目录下.

最新文章

  1. 前端学PHP之字符串函数
  2. Express4.x常用API(二):Request
  3. MySQL 加锁处理分析
  4. Linux-Apache+Mysql+PHP+PHPWind(重点Apache+PHP集成环境)
  5. asp.net ajax 调用错误解决
  6. English is very important!
  7. 【Swift】Runtime动态性分析
  8. SELinux与进程管理
  9. 自制操作系统Antz(10)——实现shell(上)
  10. Web API系列(三) 异常处理
  11. open函数新建文件报错
  12. [Scala] [Coursera]
  13. java 多线程(生产者消费者)
  14. linux gz 解压缩
  15. JMeter采用NON GUI模式时如何记录并查看错误
  16. C#简述(三)
  17. webapp的优化总结
  18. 虚拟机安装的Winserver 2008 R2系统,宿主机无法ping通主机
  19. 我的天$删除注册表$安装mysql最后一步不能启动服务的解决办法
  20. android系统提供的几种颜色Color

热门文章

  1. WPF中使用WPFMediaKit视频截图案例
  2. DRF视图集的使用
  3. MATLAB作图方法与技巧(一)
  4. (4)java基础知识
  5. 【HNOI2008】玩具装箱
  6. 潜伏者(noip09年t1)解题报告 C++
  7. HDU 1251 统计难题 (字典树)(查询是否为前缀)
  8. Linux命令之yum
  9. HDOJ 2582 f(n)
  10. XCode为单独文件设置ARC