微信小程序獲取位置展示地圖并標(biāo)注信息的實(shí)例代碼
1.map組件的高度如果想要鋪滿屏幕,要是使用height:100vh樣式
2.獲取位置要在app.json
中標(biāo)明權(quán)限
3.先使用wx.getLocation
獲取自己的位置,然后再回調(diào)中使用setData方法,賦予數(shù)據(jù)給前臺(tái)頁(yè)面展示標(biāo)注點(diǎn)
index.js
//index.js //獲取應(yīng)用實(shí)例 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:"服務(wù):青少年英語(yǔ)培訓(xùn)\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: "服務(wù):出租龍興園西區(qū)9號(hào)樓二單元501\r\n姓名:陶士涵\r\n電話:18808987876", bgColor: "#fff", padding: "5px", borderRadius: "2px", borderWidth: "1px", borderColor: "#07c160", } } ], }); } }) }, })
index.wxml
<!--index.wxml--> <map id="myMap" style="width: 100%; height:100vh;" 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": "找服務(wù)", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json", "permission": { "scope.userLocation": { "desc": "你的位置信息將用于獲取周邊服務(wù)" } } }
總結(jié)
以上所述是小編給大家介紹的微信小程序獲取位置展示地圖并標(biāo)注信息的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
刪除javascript所創(chuàng)建子節(jié)點(diǎn)的方法
這篇文章主要介紹了刪除javascript所創(chuàng)建子節(jié)點(diǎn)的方法,涉及javascript針對(duì)頁(yè)面節(jié)點(diǎn)元素的操作技巧,需要的朋友可以參考下2015-05-05Javascript如何實(shí)現(xiàn)雙指控制圖片功能
這篇文章主要介紹了Javascript如何實(shí)現(xiàn)雙指控制圖片功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02js統(tǒng)計(jì)頁(yè)面的來(lái)訪次數(shù)實(shí)現(xiàn)代碼
這篇文章主要介紹了如何使用js統(tǒng)計(jì)頁(yè)面的來(lái)訪次數(shù),需要的朋友可以參考下2014-05-05微信小程序?qū)崿F(xiàn)輪播圖(適配機(jī)型)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)輪播圖,適配機(jī)型,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06

js實(shí)現(xiàn)表單多按鈕提交action的處理方法

js實(shí)現(xiàn)頭像圖片切割縮放及無(wú)刷新上傳圖片的方法