vue 高德地图 只能再矢量图形上选择坐标
效果图
直接上代码：
<template>
<div id="outer-box">
<div style="width: 100%;height: 300px" id="container"></div>
</div>
</template>
<script>
// eslint-disable-next-line
import AMap from "AMap";
var map;
export default {
name: "canteensignamap",
props: {
schoolcoordinate: {
type: [String, Number, Array]
//type: Number
},
coordinate: {
type: [String, Number, Array]
//type: Number
},
address: {
type: [String, Number, Array]
}
},
watch: {
//箭头学校坐标
schoolcoordinate(val) {
let that = this;
if(val){
//绘制圆形遮盖物
that.mapcircle(val)
}else{
//初始化地图
that.init()
}
// 食堂坐标存在 渲染坐标点位
if(that.coordinate){
that.inits()
}
},
},
data() {
return {
ruleForm: {
addr: "",
long: "",
lat: "",
},
map:{},
geocoder:{},
marker:'',
infoWindow:'',
circle:''
};
},
mounted: function() {
this.init();
},
methods: {
//初始化地图定义地图参数
init() {
let that = this;
// let geocoder, marker;
that.map = new AMap.Map("container", {
resizeEnable: true,
// center: [116.433322, 39.900256],
zoom: 14,
searchOption: {
city: '襄阳市',
citylimit: true
},
});
that.marker = new AMap.Marker();
that.infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -20)
});
AMap.plugin("AMap.Geocoder", function() {
that.geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
});
//地图点击事件
that.map.on("click", function(e) {
that.$message.error('请在圆形范围内容点选坐标');
// var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
// that.marker.setMap(that.map);
// that.marker.setPosition(lnglatXY);
// that.regeocoder(lnglatXY, that);
// 获取经纬度
});
},
//绘制食堂点位
inits() {
let that = this;
if (that.coordinate) {
that.marker.setMap(that.map);
that.marker.setPosition(that.coordinate.split(','));
that.map.setCenter(that.marker.getPosition());
that.map.setFitView(that.marker);
}
},
//根据经纬度获取地址并创建点位
regeocoder(lnglatXY, that) {
that.geocoder.getAddress(lnglatXY, function(status, result) {
if (status === "complete" && result.info === "OK") {
var address = result.regeocode.formattedAddress;
that.ruleForm.addr = address;
var obj = {
address: address,
coordinate: lnglatXY.toString()
}
//返回父组件数据
that.$emit('handlerJump', obj)
}
});
if (!that.marker) {
that.marker = new AMap.Marker();
that.map.add(that.marker);
}
that.marker.setPosition(lnglatXY);
that.map.setFitView(that.marker);
},
//根据学校坐标绘制圆形遮盖物
mapcircle(val){
let that = this;
that.circle = new AMap.Circle({
center: val.split(','),
radius: 500, //半径
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeOpacity: 0.4,
fillOpacity: 0.1,
strokeDasharray: [0, 0],
fillColor: '#1791fc',
zIndex: 10,
})
that.circle.setMap(that.map)
//遮盖物添加点击创建点位坐标
that.circle.on("click", function(e) {
var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
that.marker.setMap(that.map);
that.marker.setPosition(lnglatXY);
that.regeocoder(lnglatXY, that);
// 获取经纬度
});
// 缩放地图到合适的视野级别
that.map.setFitView([ that.circle ])
},
}
};
</script>
<style>
#container {
width: 100%;
height: 100%;
margin: 0px;
font-size: 13px;
}
#pickerBox {
position: absolute;
z-index: 9999;
top: 10px;
left: 20px;
width: 300px;
}
#pickerInput {
width: 200px;
padding: 5px 5px;
}
#poiInfo {
background: #fff;
}
.amap_lib_placeSearch .poibox.highlight {
background-color: #CAE1FF;
}
.amap_lib_placeSearch .poi-more {
display: none !important;
}
</style>
网友评论