<template>
|
<div class="map-container">
|
<div id="localMap"></div>
|
</div>
|
</template>
|
|
<script>
|
import initBingMap from "./initMap.js";
|
export default {
|
data() {
|
return {
|
lngNum: null, // 经度
|
latNum: null // 纬度
|
};
|
},
|
created: function() {
|
// eslint-disable-next-line
|
initBingMap.init().then(Microsoft => {
|
// eslint-disable-next-line
|
// console.log(Microsoft);
|
// console.log("加载成功...");
|
setTimeout(res => {
|
this.initMap();
|
}, 1000);
|
});
|
},
|
methods: {
|
initMap() {
|
const _this = this;
|
// eslint-disable-next-line
|
let map = new Microsoft.Maps.Map("#localMap", {
|
credentials:
|
"AgzeobkGvmpdZTFuGa7_6gkaHH7CXHKsFiTQlBvi55x-QLZLh1rSjhd1Da9bfPhD"
|
});
|
// eslint-disable-next-line
|
Microsoft.Maps.Events.addHandler(map, "click", _this.getClickLocation);
|
var obj = {
|
lng: -33.89546535000133,
|
lat: 151.1866805450932
|
};
|
_this.getcenter(obj);
|
},
|
getClickLocation(e) {
|
// 若点击到地图的标记上，而非地图上
|
// eslint-disable-next-line
|
let [_this, loc] = [this, null];
|
if (e.targetType === "pushpin") {
|
loc = e.target.getLocation();
|
} else {
|
// 若点击到地图上
|
// eslint-disable-next-line
|
var point = new Microsoft.Maps.Point(e.pageX, e.pageY);
|
loc = e.target.tryPixelToLocation(
|
point,
|
// eslint-disable-next-line
|
Microsoft.Maps.PixelReference.page
|
);
|
}
|
// console.log(loc.latitude + ", " + loc.longitude);
|
// console.log(loc);
|
_this.lngNum = loc.longitude;
|
_this.latNum = loc.latitude;
|
const data = {
|
lngNum: _this.lngNum,
|
latNum: _this.latNum
|
};
|
this.$emit("getLocationNums", data);
|
},
|
getcenter(point) {
|
// eslint-disable-next-line
|
let map = new Microsoft.Maps.Map("#localMap", {
|
credentials:
|
"AgzeobkGvmpdZTFuGa7_6gkaHH7CXHKsFiTQlBvi55x-QLZLh1rSjhd1Da9bfPhD",
|
// eslint-disable-next-line
|
center: new Microsoft.Maps.Location(point.lng, point.lat)
|
});
|
map.getCenter();
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.map-container {
|
width: 100%;
|
height: 400px;
|
border: 1px solid #000;
|
}
|
</style>
|
