?本地圖程序利用map組件，以及使用它的markers,polyline屬性分別設置地圖兩個位置的標志以及他們之間的連線，利用騰訊地圖的API對兩個地點進行查詢，動態設置地圖的經緯度，以及動態初始化markers,polyline屬性。

程序運行截圖如下：

程序代碼如下：

app.json

{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/Map/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "個人主頁", "iconPath": "utils/images/b3.png", "selectedIconPath": "utils/images/b4.png" }, { "pagePath": "pages/Map/index", "text": "地圖", "iconPath": "utils/images/a1.png", "selectedIconPath": "utils/images/a2.png" } ] } }

?2.?map/index.js

// pages/Map/index.js var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js'); var qqmapsdk = new QQMapWX({ key: 'GEYBZ-IM4WJ-TK5FL-K7BKW-TDDV2-P5FGL'}); Page({/** * 頁面的初始數據 */ data: { start_lat: 0, start_lon: 0, end_lat:0, end_lon:0, markers: [ { iconPath: '../../utils/images/qz.jpg', id: 0, latitude: 0, longitude: 0, width: 50, height: 50 }, { iconPath: '../../utils/images/qz.jpg', id: 1, latitude: 0, longitude: 0, width: 50, height: 50 } ], address: '', polyline: [ { points: [{ longitude: 0, latitude: 0}, { latitude: 0, longitude: 0 }], color: "#ff6600", width: 2, dottedLine: false, arrowLine: true, borderColor: "#000", borderWidth: 5 } ] }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { var that = this; let start_lat=0; let start_lon=0; wx.getLocation({ success: function (res) { qqmapsdk.search({ keyword: '江西省南昌市新建區豐和南大道696號', complete: function (res) { console.log(res.data[0].location.lat); console.log(res.data[0].location.lng); start_lat = res.data[0].location.lat; start_lon = res.data[0].location.lng; that.setData({ start_lat: res.data[0].location.lat, start_lon: res.data[0].location.lng, "markers[0].latitude": res.data[0].location.lat, "markers[0].longitude": res.data[0].location.lng, "polyline[0].points[0].latitude": res.data[0].location.lat, "polyline[0].points[0].longitude": res.data[0].location.lng, }) } }); qqmapsdk.search({ keyword: '江西省南昌市新建區紅谷灘新區學府大道999號', complete: function (res) { that.setData({ end_lat: res.data[0].location.lat, end_lon: res.data[0].location.lng, "markers[1].latitude": res.data[0].location.lat, "markers[1].longitude": res.data[0].location.lng, "polyline[0].points[1].latitude": res.data[0].location.lat, "polyline[0].points[1].longitude": res.data[0].location.lng, // polyline: [{ // points: [{ // longitude: res.data[0].location.lng, // latitude: res.data[0].location.lat// }, { // latitude: that.data.start_lat, // longitude: that.data.start_lon // }], // color: "#ff6600", // width: 2, // dottedLine: false, // arrowLine: true, // borderColor: "#000", // borderWidth: 5 // }] }); } })}, })}, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () {},/** * 生命周期函數--監聽頁面顯示 */ onShow: function () {},/** * 生命周期函數--監聽頁面隱藏 */ onHide: function () {},/** * 生命周期函數--監聽頁面卸載 */ onUnload: function () {},/** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () {},/** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () {},/** * 用戶點擊右上角分享 */ onShareAppMessage: function () {} })

???????? ?3.?map/index.wxml

<map class='map' latitude='{{start_lat}}' longitude='{{start_lon}}' polyline="{{polyline}}" markers='{{markers}}'> </map>

? ?4.??map/index.wxss

page{ width: 100%; height: 100%; } .map{ height: 100%; width: 100%; }

?

總結

以上是生活随笔為你收集整理的微信小程序 地图组件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。