小編給大家分享一下微信小程序如何獲取位置展示地圖并標注信息,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!

1.map組件的高度如果想要鋪滿屏幕,要是使用height:100vh樣式
2.獲取位置要在app.json中標明權限
3.先使用wx.getLocation獲取自己的位置,然后再回調中使用setData方法,賦予數據給前臺頁面展示標注點
index.js
//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
},
onLoad: function () {
var self=this;
this.mapCtx = wx.createMapContext('myMap');
wx.getLocation({
type: 'gcj02',
success(res) {
self.setData({
latitude : res.latitude,
longitude : res.longitude,
markers: [{
id: 1,
latitude: res.latitude,
longitude: res.longitude,
iconPath: '/image/location.png',
callout:{
content:"服務:青少年英語培訓\r\n姓名:陶士涵\r\n電話:18808987876",
bgColor:"#fff",
padding:"5px",
borderRadius:"2px",
borderWidth:"1px",
borderColor:"#07c160",
}
},
{
id: 2,
latitude: res.latitude,
longitude: res.longitude+0.01,
iconPath: '/image/location.png',
callout: {
content: "服務:出租龍興園西區9號樓二單元501\r\n姓名:陶士涵\r\n電話:18808987876",
bgColor: "#fff",
padding: "5px",
borderRadius: "2px",
borderWidth: "1px",
borderColor: "#07c160",
}
}
],
});
}
})
},
})index.wxml
<!--index.wxml-->
<map
id="myMap"
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
covers="{{covers}}"
show-location
></map>app.json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "找服務",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于獲取周邊服務"
}
}
}看完了這篇文章,相信你對“微信小程序如何獲取位置展示地圖并標注信息”有了一定的了解,如果想了解更多相關知識,歡迎關注創新互聯成都網站設計公司行業資訊頻道,感謝各位的閱讀!
另外有需要云服務器可以了解下創新互聯scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
文章標題:微信小程序如何獲取位置展示地圖并標注信息-創新互聯
鏈接分享:http://www.yijiale78.com/article36/pipsg.html
成都網站建設公司_創新互聯,為您提供定制開發、網站策劃、網站改版、搜索引擎優化、關鍵詞優化、做網站
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯