快速實作前端百度地圖定位組件，顯示地圖定位，標記點，并顯示詳細地址; 下載完整代碼請訪問uni-app插件市場地址：https://ext.dcloud.net.cn/plugin?id=12677
效果圖如下：
代碼如下：
# 百度地圖定位組件，顯示地圖定位，標記點，并顯示詳細地址
#### 使用方法
```使用方法
#安裝vue-baidu-map插件
npm install vue-baidu-map --save
<baidu-map :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代碼部分
```html
<template>
<view >
<!-- 百度地圖組件 @ready： 處理資料重繪 -->
<baidu-map :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代碼 （引入組件 填充資料）
```javascript
<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
```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>
```
快速實作前端百度地圖定位組件，顯示地圖定位，標記點，并顯示詳細地址; 下載完整代碼請訪問uni-app插件市場地址：https://ext.dcloud.net.cn/plugin?id=12677
效果圖如下：
代碼如下：
# 百度地圖定位組件，顯示地圖定位，標記點，并顯示詳細地址
#### 使用方法
```使用方法
#安裝vue-baidu-map插件
npm install vue-baidu-map --save
<baidu-map :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代碼部分
```html
<template>
<view >
<!-- 百度地圖組件 @ready： 處理資料重繪 -->
<baidu-map :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代碼 （引入組件 填充資料）
```javascript
<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
```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>
```
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/554821.html
標籤：其他
下一篇：返回列表