微信小程序怎么實現在地圖上多地點標識

這篇文章主要介紹了微信小程序怎么實現在地圖上多地點標識的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇微信小程序怎么實現在地圖上多地點標識文章都會有所收獲，下面我們一起來看看吧。

以下是具體做法：

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>

js

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: 4017 },18 clickable: true19 }]20 },21 onReady: function(e) {22 // 使用 wx.createMapContext 獲取 map 上下文23 this.mapCtx = wx.createMapContext('myMap')24 },2526 onLoad: function() {27 console.log('地圖定位！')28 let that = this29 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 },4344 /**45 * 標示點移動觸發46 */47 regionchange(e) {48 console.log(e.type)49 },5051 /**52 * 點擊標識點觸發53 */54 markertap(e) {55 console.log(e)56 },5758 /**59 * control控件點擊時間60 */61 controltap(e) {62 console.log(e.controlId)63 this.moveToLocation()64 },656667 /**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 },7879 /**80 * 移動到自己位置81 */82 moveToLocation: function() {83 let mpCtx = wx.createMapContext("map");84 mpCtx.moveToLocation();85 },868788 /**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: 48102 };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 ]

運行示例時，建議放在同一目錄下.

關于“微信小程序怎么實現在地圖上多地點標識”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“微信小程序怎么實現在地圖上多地點標識”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。