微信小程序map地圖使用方法詳解
本文實例為大家分享了微信小程序map地圖使用的具體實現(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:{ // 點擊標(biāo)記點 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)記點在地圖可視視野內(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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中Set和Map數(shù)據(jù)結(jié)構(gòu)使用場景詳解
這篇文章主要為大家介紹了JavaScript中Set和Map數(shù)據(jù)結(jié)構(gòu)使用場景詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪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會[總結(jié)]
看過很多JavaScript書,對JavaScript的面向?qū)ο笾v的都比較深入,但是并沒有做到深入淺出,總結(jié)了我做的一些JavaScript程序的經(jīng)驗,以簡潔明了的文字使大家明白JavaScript面向?qū)ο蟮膶崿F(xiàn)。2008-11-11Canvas中繪制Geojson數(shù)據(jù)示例詳解
這篇文章主要為大家介紹了Canvas中繪制Geojson數(shù)據(jù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11原生js 封裝get ,post, delete 請求的實例
下面小編就為大家?guī)硪黄鷍s 封裝get ,post, delete 請求的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08Extjs顯示從數(shù)據(jù)庫取出時間轉(zhuǎn)換JSON后的出現(xiàn)問題
后臺從數(shù)據(jù)庫取出時間,JSON格式化后再傳到gridpanel,這時時間變成了:/Date(32331121223)/這樣的格式,本文將詳細介紹解決Extjs顯示從數(shù)據(jù)庫取出時間轉(zhuǎn)換JSON后的出現(xiàn)問題2012-11-11