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

