微信小程序 – 多地点标识(map)

演示如下：

(此图片来源于网络，如有侵权，请联系删除! )

wxml

1 <map id="map" scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location style="width: 100%; height: 580px;"></map>


1 let hospitalData = require('hospitalData')
2 Page({
3 data: {
4 centerX: 0.0,
5 centerY: 0.0,
6 //可能我标识的地点和你所在区域比较远，缩放比例建议5;
7 scale:15,
8 markers: [],
9 controls: [{
10 id: 1,
11 iconPath: '/image/location-control.png',
12 position: {
13 left: 0,
14 top: 10,
15 width: 40,
16 height: 40
17 },
18 clickable: true
19 }]
20 },
21 onReady: function(e) {
22 // 使用 wx.createMapContext 获取 map 上下文
23 this.mapCtx = wx.createMapContext('myMap')
24 },
25
26 onLoad: function() {
27 console.log('地图定位！')
28 let that = this
29 wx.getLocation({
30 type: 'gcj02', //返回可以用于wx.openLocation的经纬度
31 success: (res) => {
32 let latitude = res.latitude;
33 let longitude = res.longitude;
34 let marker = this.createMarker(res);
35 this.setData({
36 centerX: longitude,
37 centerY: latitude,
38 markers: this.getHospitalMarkers()
39 })
40 }
41 });
42 },
43
44 /**
45 * 标示点移动触发
46 */
47 regionchange(e) {
48 console.log(e.type)
49 },
50
51 /**
52 * 点击标识点触发
53 */
54 markertap(e) {
55 console.log(e)
56 },
57
58 /**
59 * control控件点击时间
60 */
61 controltap(e) {
62 console.log(e.controlId)
63 this.moveToLocation()
64 },
65
66
67 /**
68 * 获取医院标识
69 */
70 getHospitalMarkers() {
71 let markers = [];
72 for (let item of hospitalData) {
73 let marker = this.createMarker(item);
74 markers.push(marker)
75 }
76 return markers;
77 },
78
79 /**
80 * 移动到自己位置
81 */
82 moveToLocation: function() {
83 let mpCtx = wx.createMapContext("map");
84 mpCtx.moveToLocation();
85 },
86
87
88 /**
89 * 还有地图标识，可以在name上面动手
90 */
91 createMarker(point) {
92 let latitude = point.latitude;
93 let longitude = point.longitude;
94 let marker = {
95 iconPath: "/image/location.png",
96 id: point.id || 0,
97 name: point.name || '',
98 latitude: latitude,
99 longitude: longitude,
100 width: 25,
101 height: 48
102 };
103 return marker;
104 }
105 })

hospitalData.js （模拟数据）


1 module.exports = [{
2 "id": 1,
3 "name": "永州市中心医院",
4 "longitude": "111.62852107566833",
5 "latitude": "26.42142999357519"
6 },
7 {
8 "id": 2,
9 "name": "永州市中医院",
10 "longitude": "111.5972679762268",
11 "latitude": "26.44470581245983"
12 }
13 ]

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

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

标签聚合

【小程序源码网资源版权风险说明】：
本站为避免不必要的纷争，分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台，站长只为大家提供相关资源的介绍和跳转引导。因可能有疏忽大意，所以如有遗漏资源侵犯了您的合法权利，请联系站长删除。
【小程序源码网资源下载使用说明】：
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网毫无人看的介绍】：
本站又称Z站，原名贼娘网，开站于2018年，换过三任站长，目前站长是第四任站长，本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站，主要小程序资源有用于学习的小程序源码，也有正版原创可商用的小程序源码，是一个公益博客型网站。
【小程序源码网原创源码版权申明】：
未经小程序源码网许可，任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内，版权无使用限制)，否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】：
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网站长最后的屁话】：
如有您认为本站有任何侵犯您合法权益的文章，或者您有什么疑问需求，欢迎联系站长QQ，站长24小时在线，备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理，如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论，就不用加站长啦，对于白嫖党，QQ群才是处理问题的天堂，当然站长也欢迎大家骚扰~
小程序源码网 » 微信小程序 – 多地点标识(map)