<template>
|
<div class="map-box">
|
<div id="container"></div>
|
<input id="inputmap" class="gl-select-input" />
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
// 高德地图获取当前位置
|
location: "",
|
lat: 0,
|
lng: 0,
|
mark: {},
|
details: {},
|
type: false,
|
mapObj: {},
|
};
|
},
|
methods: {
|
// 卸载地图
|
destroyMap() {
|
this.mapObj.destroy();
|
},
|
getLocation(data = {}) {
|
let _that = this;
|
this.mapObj = new AMap.Map("container", {
|
resizeEnable: true, //是否监控地图容器尺寸变化
|
zoom: 11, //初始化地图层级
|
// layers: [new AMap.TileLayer.Satellite()]
|
});
|
// 输入提示
|
var autoOptions = {
|
input: "inputmap",
|
};
|
const auto = new AMap.Autocomplete(autoOptions);
|
const placeSearch = new AMap.PlaceSearch({
|
map: this.mapObj,
|
});
|
AMap.event.addListener(placeSearch, "markerClick", function (e) {
|
console.log(e)
|
const obj = {
|
addr: e.data.address === "" ? e.data.name : e.data.address,
|
lng: e.data.location.lng,
|
lat: e.data.location.lat,
|
};
|
auto.input.value = e.data.address;
|
_that.$emit("setLocation", obj);
|
});
|
if (data.val) {
|
auto.input.value = data.val;
|
if (data.l) {
|
this.markerImg(data.l, data.r);
|
} else {
|
placeSearch.search(data.val);
|
}
|
}
|
// 构造地点查询类
|
AMap.event.addListener(auto, "select", select); // 注册监听，当选中某条记录时会触发
|
function select(e) {
|
placeSearch.setCity(e.poi.adcode);
|
placeSearch.search(e.poi.name); // 关键字查询
|
}
|
// 位置定位
|
let geolocation;
|
if (this.details.lat) {
|
_that.markerImg(this.details.lat, this.details.lng);
|
}
|
// 点击事件
|
this.mapObj.on("click", function (e) {
|
let l = e.lnglat.getLng(),
|
r = e.lnglat.getLat();
|
_that.markerImg(l, r);
|
const geocoder = new AMap.Geocoder({
|
city: "",
|
});
|
geocoder.getAddress([l, r], (s, t) => {
|
const obj = {
|
addr: t.regeocode.formattedAddress,
|
lat: r,
|
lng: l,
|
};
|
auto.input.value = t.regeocode.formattedAddress;
|
_that.$emit("setLocation", obj);
|
});
|
});
|
// 定位
|
this.mapObj.plugin(["AMap.Geolocation"], function () {
|
geolocation = new AMap.Geolocation({
|
enableHighAccuracy: true, // 是否使用高精度定位，默认:true
|
timeout: 10000, // 超过10秒后停止定位，默认：无穷大
|
maximumAge: 0, // 定位结果缓存0毫秒，默认：0
|
convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
|
showButton: true, // 显示定位按钮，默认：true
|
buttonPosition: "LB", // 定位按钮停靠位置，默认：'LB'，左下角
|
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
|
showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
|
showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true
|
panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
|
zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
|
});
|
_that.mapObj.addControl(geolocation);
|
geolocation.getCurrentPosition();
|
});
|
AMap.event.addListener(geolocation, "complete", (result) => {
|
_that.lat = result.position.lat;
|
_that.lng = result.position.lng;
|
_that.location = result.formattedAddress;
|
});
|
},
|
markerImg(l, r) {
|
if (this.mark) {
|
this.mapObj.remove(this.mark);
|
}
|
this.mark = new AMap.Marker({
|
position: [l, r],
|
offset: new AMap.Pixel(-9, -30),
|
});
|
this.mark.setMap(this.mapObj);
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.map-box {
|
position: relative;
|
}
|
#container {
|
width: 100%;
|
height: 500px;
|
}
|
#inputmap {
|
position: absolute;
|
left: 10px;
|
top: 10px;
|
height: 30px;
|
width: 250px;
|
background-color: #fff;
|
}
|
</style>
|
