我知道一個後端給的地址的經緯度要顯示在地圖上。但是如果我不知道zoom就不知道 應該縮放多少啊。
我們可以在map的@ready事件中獲取他的zoom
<template>
<div>
<baidu-map class="bm-view"
:center="center"
:zoom="zoom"
@ready="handler"
:scroll-wheel-zoom="true"
:mapClick="false"
ak="**********">
<!--地圖類型-->
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
<!--地圖縮放-->
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<!--標註點 animation="BMAP_ANIMATION_BOUNCE"-->
<div v-for="marker in markers" :key="marker.lng">
<bm-marker :position="{lng: marker.lng, lat: marker.lat}" @click="markerClick(marker)">
</bm-marker>
<bm-label
:content="marker.content"
:offset="{width:-55,height:-65}"
:position="{lng: marker.lng, lat: marker.lat}"
:labelStyle="{border:'1px solid #6ea4cd', padding:'8px',fontWeight: '600',fontSize:'14px',cursor: 'pointer'}"
:title="marker.content"
@click="markerClick(marker)"
/>
</div>
</baidu-map>
</div>
</template>
<script>import { BaiduMap,
BmControl,
BmView,
BmAutoComplete,
BmLocalSearch,
BmMarker,
BmGeolocation,
BmScale } from 'vue-baidu-map'
export default {
components: {
BaiduMap,
BmControl,
BmView,
BmAutoComplete,
BmLocalSearch,
BmMarker,
BmGeolocation,
BmScale,
},
data () {
return {
center: {lng: 0, lat: 0},
zoom: 15,
markers: [],
}
},mounted(){
this.markers = [{
lng: 116.404,
lat: 39.915,
content:"TCL液晶產業園"
}, {
lng: 115.504,
lat: 39.915,
content:"TCL產業園"
}]
},
methods: {
draw ({el, BMap, map}) {
// let point = new BMap.Point(116.404, 39.915)
// map.addOverlay(point)
const pixel = map.pointToOverlayPixel(new BMap.Point(116.404, 39.915))
el.style.left = pixel.x - 60 + 'px'
el.style.top = pixel.y - 20 + 'px'
},
handler ({BMap, map}) {
// 自動獲取展示的比例
var view = map.getViewport(eval(this.markers)) ； this.markers 是我們知道的經緯度。可以有多個。全部以數組形式放在裏面。
this.zoom = view.zoom;
this.center = view.center;
},
markerClick(){
debugger
this.show = true
},
infoWindowClose(){
this.show = false
}
},
destroyed() {},
}