效果圖：
代碼：
<template>
<view class="">
<map id="map" :style="{width: '100%', height:show?'1100rpx':'1300rpx'}" :latitude="latitude" :longitude="longitude"
:controls="controls" show-location @controltap="controltap"></map>
</view>
</template>
<script>
export default {
data(){
return{
latitude: 0.00, //中心緯度
longitude: 0.00, //中心經(jīng)度
map:{},
controls:[
{
id:1,
iconPath:'/static/business/back.png',
position:{
left:15,
top: 35,
width:34,
height:34
},
clickable:true
},
{
id:2,
iconPath:'/static/business/back.png',
position:{
left:15,
top: 550,
width:34,
height:34
},
clickable:true
},
],
}
},
onReady() {
// 得到map對(duì)象,注意：引號(hào)里的map指向<map>組件的id岩饼，如果<map>組件沒有加上id寺谤，就操作不了<map>組件
this.map = uni.createMapContext("map", this);
},
methods:{
controltap(e){ // 地圖控件點(diǎn)擊
let id = e.detail.controlId;
if(id==1){
console.log('地圖控件點(diǎn)擊返回上一頁');
uni.navigateBack(1)
}
if(id==2) {
console.log('地圖控件回到原位');
uni.getLocation({
type: 'wgs84',
success: function (res) {
console.log('當(dāng)前位置的經(jīng)度：' + res.longitude);
console.log('當(dāng)前位置的緯度：' + res.latitude);
this.longitude = res.longitude;
this.latitude= res.latitude;
}
});
this.map.moveToLocation()
}
},
}
}
</script>
<style lang="scss" scoped>
</style>
