微信小程序map地圖使用方法詳解
本文實(shí)例為大家分享了微信小程序map地圖使用的具體實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
以下代碼是主要的代碼片段
<!-- 地圖部分 --> <!-- enable-traffic 顯示路況 --> <view class="map_container"> <map id='customerMap' class="map" :longitude='longitude' :latitude='latitude' :scale='scale' :markers='markers' :controls="controls" show-location @markertap="markertap" @updated="updatedmap" @controltap='bindcontroltap'></map> </view>
data(){ return{ latitude:23.140962248, longitude:113.305301124, scale:12, markers:[ {id: '', latitude: 23.140962248, longitude: 113.305301124, iconPath: '../static/select-dw.png',//當(dāng)前位置圖標(biāo)路徑 width: 25, height: 39, }, { latitude: 23.129742, longitude: 113.26754, iconPath: '../static/mark.png',//客戶圖標(biāo)路徑 width: 28, height: 28, label: { content: '詹俊俊', textAlign: 'center', fontSize: 12 } }] } }, onReady() { this.mapCtx = wx.createMapContext('customerMap') }, methods:{ // 點(diǎn)擊標(biāo)記點(diǎn) markertap(e) { let { markerId } = e.detail; let item = this.markers.find(v => v.id === markerId); console.log('item', item) uni.openLocation({ latitude: Number(item.latitude), longitude: Number(item.longitude), name: item.label.content, address: item.address, success: function() { console.log('success'); } }); }, // 當(dāng)?shù)貓D加載完成后觸發(fā) updatedmap() { this.mapUpdated = true; console.log('執(zhí)行') this.includePoints(); //所有客戶顯示在視圖內(nèi) }, // 讓標(biāo)記點(diǎn)在地圖可視視野內(nèi) includePoints() { const that = this const points = [{ latitude: that.latitude, longitude: that.longitude }]; this.markers.forEach(item => { const obi = { latitude: item.latitude, longitude: item.longitude } points.push(obi) }) this.mapCtx.includePoints({ padding: [80, 50, 80, 50], points }) }, }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 地圖定位簡單實(shí)例
- 微信小程序 地圖(map)實(shí)例詳解
- 微信小程序中進(jìn)行地圖導(dǎo)航功能的實(shí)現(xiàn)方法
- 微信小程序 使用騰訊地圖SDK詳解及實(shí)現(xiàn)步驟
- 微信小程序 高德地圖SDK詳解及簡單實(shí)例(源碼下載)
- 微信小程序 地圖map詳解及簡單實(shí)例
- 微信小程序開發(fā)之map地圖實(shí)現(xiàn)教程
- 微信小程序之獲取當(dāng)前位置經(jīng)緯度以及地圖顯示詳解
- 微信小程序教程之本地圖片上傳(leancloud)實(shí)例詳解
- 微信小程序地圖(map)組件點(diǎn)擊(tap)獲取經(jīng)緯度的方法
相關(guān)文章
JavaScript中Set和Map數(shù)據(jù)結(jié)構(gòu)使用場景詳解
這篇文章主要為大家介紹了JavaScript中Set和Map數(shù)據(jù)結(jié)構(gòu)使用場景詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06理解Javascript_14_函數(shù)形式參數(shù)與arguments
在'執(zhí)行模型詳解'的'函數(shù)執(zhí)行環(huán)境'一節(jié)中對arguments有了些許的了解,那么讓我們深入的分析一下函數(shù)的形式參數(shù)與arguments的關(guān)系。2010-10-10JavaScript面向?qū)ο笾w會(huì)[總結(jié)]
看過很多JavaScript書,對JavaScript的面向?qū)ο笾v的都比較深入,但是并沒有做到深入淺出,總結(jié)了我做的一些JavaScript程序的經(jīng)驗(yàn),以簡潔明了的文字使大家明白JavaScript面向?qū)ο蟮膶?shí)現(xiàn)。2008-11-11Canvas中繪制Geojson數(shù)據(jù)示例詳解
這篇文章主要為大家介紹了Canvas中繪制Geojson數(shù)據(jù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11原生js 封裝get ,post, delete 請求的實(shí)例
下面小編就為大家?guī)硪黄鷍s 封裝get ,post, delete 請求的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08Extjs顯示從數(shù)據(jù)庫取出時(shí)間轉(zhuǎn)換JSON后的出現(xiàn)問題
后臺(tái)從數(shù)據(jù)庫取出時(shí)間,JSON格式化后再傳到gridpanel,這時(shí)時(shí)間變成了:/Date(32331121223)/這樣的格式,本文將詳細(xì)介紹解決Extjs顯示從數(shù)據(jù)庫取出時(shí)間轉(zhuǎn)換JSON后的出現(xiàn)問題2012-11-11