<template>
<baidu-map v-if="isshow" style=" width: 100%;height: 300px;" :center="center" :zoom="zoom"
:scroll-wheel-zoom='true' @click="getClickInfo" @ready="handler">
<bm-marker :position="center" :dragging="false"></bm-marker>
</baidu-map>
</template>
<script>
export default {
data() {
return {
// 百度地图信息设置
// 地址信息
address: null,
center: { lng: 0, lat: 0 },
isshow: false,
//地图展示级别
zoom: 13
};
},
created() {},
methods: {
handleInfo(row, column, cell, event) {
this.form = row;
this.isshow = false;
//console.log(row);
this.imageUrl = row.imagePath;
var coordinates = row.coordinates;
if (coordinates) {
var coordinateslist = coordinates.split(",");
if (coordinateslist.length == 2) {
this.center.lng = coordinateslist[0];
this.center.lat = coordinateslist[1];
this.isshow = true;
let ggPoint = new BMap.Point(this.center.lng, this.center.lat);
let geoCoder = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
geoCoder.translate(pointArr, 1, 5, this.translateCallback)
}
this.zoom = this.zoom;
}
},
handler({ BMap, map }) {
console.log(BMap, map)
let ggPoint = new BMap.Point(this.center.lng, this.center.lat);
let geoCoder = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
geoCoder.translate(pointArr, 1, 5, this.translateCallback)
},
/* 坐标转为百度 */
translateCallback(data) {
console.log(data)
this.center.lng = data.points[0].lng
this.center.lat = data.points[0].lat
}
};
</script>
VUE + 百度地图 ------- 坐标转为百度坐标
最新推荐文章于 2023-11-14 14:20:16 发布