前端uni-app 地图定位组件，显示地图定位，标记点，并显示详细地址; 效果图如下：
代码如下：
地图定位组件，显示地图定位，标记点，并显示详细地址
使用方法
#安装vue-baidu-map插件
npm install vue-baidu-map --save
<baidu-map class="bm-view" :center="centerPoint" :zoom=10 @ready="handler">
<!-- 百度地图定位点 -->
<bm-marker :position="centerPoint" :dragging="true" @click="infoWindowOpen">
<!-- 百度地图遮罩物 -->
<bm-info-window style="border: none !important; border-radius: 4px !important;" :show="show"
@close="infoWindowClose" @open="infoWindowOpen">
{{mapName}}
</bm-info-window>
</bm-marker>
</baidu-map>
HTML代码部分
<template>
<view class="content">
<!-- 百度地图组件 @ready： 处理数据刷新 -->
<baidu-map class="bm-view" :center="centerPoint" :zoom=10 @ready="handler">
<!-- 百度地图定位点 -->
<bm-marker :position="centerPoint" :dragging="true" @click="infoWindowOpen">
<!-- 百度地图遮罩物 -->
<bm-info-window style="border: none !important; border-radius: 4px !important;" :show="show"
@close="infoWindowClose" @open="infoWindowOpen">
{{mapName}}
</bm-info-window>
</bm-marker>
</baidu-map>
<view style="height: 20px;"></view>
</view>
</template>
JS代码 （引入组件 填充数据）
<script>
import Vue from 'vue'
// 引入百度地图
import BaiduMap from 'vue-baidu-map'
// 引入百度地图定位瞄点
import {
BmlMarkerClusterer,
} from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'dEctYrTTeVr76ANfzG7XwYZGPj'
});
export default {
components: {
BmlMarkerClusterer,
},
data() {
return {
centerPoint: {
lng: 113.282202,
lat: 23.13771
},
mapName: '',
show: false
}
},
onLoad() {
},
methods: {
handler({
BMap,
map
}) {
console.log(BMap, map)
this.centerPoint = {
lng: 113.282202,
lat: 23.13771
},
this.mapName = '广东省广州市海珠区阅江西路222号';
console.log('经纬度 = ', this.centerPoint);
},
infoWindowClose() {
this.show = false
},
infoWindowOpen() {
this.show = true
},
}
}
</script>
CSS
<style>
.content {
display: flex;
flex-direction: column;
margin-top: 80rpx;
align-items: center;
justify-content: center;
}
.bm-view {
margin-left: 0%;
width: 100%;
margin-top: 10px;
color: #999999;
height: 90vw;
}
</style>
阅读全文下载完整组件代码请关注微信公众号： 前端组件开发
