example.png
<template>
<section id="geo-info">
<el-form-item label="经度" prop="lngitude">
<el-input placeholder="" v-model="renderLongitude" disabled> </el-input>
</el-form-item>
<el-form-item label="纬度" prop=" latitude">
<el-input placeholder="" v-model="renderlatitude" disabled> </el-input>
</el-form-item>
<el-form-item label="地址" prop=" address">
<el-input placeholder="" v-model="renderAdderss" id="pickerInput"> </el-input>
</el-form-item>
<el-form-item label="地标" prop=" landmark">
<el-select v-model="renderLandmark" placeholder="请选择">
<el-option v-for="item in landmarkArr" :key="item.value" :label="item.label" :value="item.value">
<span class="name">{{ item.label }}</span>
<span class="addr">{{ item.address }}</span>
</el-option>
</el-select>
</el-form-item>
<el-button type="primary" id="addMark">添加坐标</el-button>
<el-button type="primary" id="clearMark">清除坐标</el-button>
<el-button type="primary" id="addPolygon">绘制围栏</el-button>
<el-button type="primary" id="clearPolygon">清除围栏</el-button>
<el-button type="primary" @click="dianji">外部调用</el-button>
<div class="geo-info">
<el-amap :zoom="20" :center="poiResultLocation" :events="mapEvents" :amap-manager="amapManager"></el-amap>
</div>
<el-form-item label="半径" prop=" radius">
<el-input placeholder="" v-model="radius" :map-manager="amapManager"> </el-input>
</el-form-item>
</section>
</template>
<script>
import {
AMapManager
} from "vue-amap";
// 拿到高德原生 AMap.Map 实例 可以在mathods使用 用的时候 map:amapManager.getMap()
let amapManager = new AMapManager();
export default {
watch: {
// 把搜索位置传入拖拽选址中
poiResultLocation(newLocation) {
this.positionPicker.start(newLocation);
},
fenceArr(newFenceArr) {
}
},
data() {
let self = this;
return {
renderAdderss: this.address,
renderlatitude: this.latitude,
renderLongitude: this.lngitude,
renderLandmark: this.landmark,
landmarkArr: [],
amapManager,
poiResultLocation: [113.855443, 34.526265], // 初始位置
positionPicker: null, //拿到拖拽选址组件实例
mouseTool: null, //注册全局绘制围栏插件实例
polygon: null, //绘制围栏成功时的插件实例 (连接坐标点)
fenceArr: [], // 围栏·经纬度数组
flagBit: false, //绘制围栏标志位
renderFenceOk: false, //绘制围栏成功标志位
positionMark: [],
mapEvents: {
// 初始化时加载
init(map) {
let addPolygonButton = document.getElementById("addPolygon")
let clearPolygonButton = document.getElementById("clearPolygon")
let clearMarkButton = document.getElementById("clearMark");
let addMarkButtom = document.getElementById("addMark");
// 引入放大缩小工具插件
map.addControl(
new AMap.ToolBar({
liteStyle: true
})
);
// 引入绘图插件 全局调用绘图插件
self.mouseTool = new AMap.MouseTool(map);
// 绘制围栏
AMap.event.addDomListener(addPolygonButton, "click", (resData) => {
if (!self.positionPicker.started) {
self.$message.warning("请先添加坐标")
self.mouseTool.close(true);
return
} else {
if (self.flagBit) {
self.mouseTool.close(false);
} else {
self.mouseTool.polygon();
}
}
}, false);
// 清除围栏
AMap.event.addDomListener(clearPolygonButton, "click", () => {
//移除计算的围栏
self.polygon.setMap(null)
self.mouseTool.close(true);
self.flagBit = false
self.renderFenceOk = false
}, false);
//绘制完成触发此事件
self.mouseTool.on("draw", (resData) => {
self.mouseTool.close(false)
self.flagBit = true
// 把坐标点传给连接坐标点插件
let arr = resData.obj.G.path.map(item => {
return [item.lng, item.lat]
})
self.fenceArr = arr
// 计算这个点是否在围栏外
self.polygon = new AMap.Polygon({
map: map,
path: self.fenceArr,
draggable: false
});
if (!self.polygon.contains(self.positionMark)) {
self.$message.warning("围栏范围必须将坐标点包含在内")
self.polygon.setMap(null)
self.mouseTool.close(true);
self.flagBit = false
} else {
self.$message.success("绘制围栏成功")
self.renderFenceOk = true
}
})
// 搜索位置插件
AMapUI.loadUI(["misc/PoiPicker"], (PoiPicker) => {
let poiPicker = new PoiPicker({
input: "pickerInput"
});
//初始化poiPicker
poiPickerReady(poiPicker);
});
//监听poi选中信息
function poiPickerReady(poiPicker) {
poiPicker.on("poiPicked", (poiResult) => {
// 清除围栏
self.mouseTool.close(true);
let { lng, lat} = poiResult.item.location;
self.poiResultLocation = [lng, lat];
});
}
// 拖拽选址组件
AMapUI.loadUI(["misc/PositionPicker"], (PositionPicker) => {
const positionPicker = new PositionPicker({
mode: "dragMarker",
map: amapManager.getMap(),
iconStyle: {
//自定义外观
url: "http://webapi.amap.com/ui/1.0/ui/misc/PointSimplifier/examples/imgs/people.png",
ancher: [24, 40],
size: [48, 48]
}
});
positionPicker.on("success", (positionResult) => {
console.log(positionResult);
let { lng, lat } = positionResult.position;
self.positionMark = [lng, lat]
if (self.renderFenceOk) {
if (!self.polygon.contains(self.positionMark)) {
self.$message.warning("坐标点必需包含在围栏内")
self.polygon.setMap(null)
self.mouseTool.close(true);
self.flagBit = false
self.renderFenceOk = false
}
}
self.renderAdderss = positionResult.address;
self.renderLongitude = positionResult.position.lng;
self.renderlatitude = positionResult.position.lat;
self.renderLandmark = positionResult.regeocode.pois[0].name;
let landmarkArr = positionResult.regeocode.pois.map(item => {
return {
label: item.name || "",
value: item.id || "",
address: item.address || ""
};
});
self.landmarkArr = landmarkArr;
});
positionPicker.on("fail", (positionResult) => {
console.log(positionResult);
self.renderAdderss = "获取地址失败";
self.renderLongitude = "获取经度失败";
self.renderlatitude = "获取纬度失败";
self.renderLandmark = "获取失败";
});
// 注册DOM对象事件：给DOM对象注册事件
// 添加坐标
AMap.event.addDomListener(addMarkButtom, "click", (resData) => {
if (self.renderFenceOk) {
return
} else {
self.mouseTool.close(true);
positionPicker.start();
}
});
// 清除坐标
AMap.event.addDomListener(clearMarkButton, "click", (resData) => {
// 绘制围栏成功就不能清除坐标
if (self.renderFenceOk) {
return
} else {
self.flagBit = false
self.mouseTool.close(true);
positionPicker.stop();
}
});
positionPicker.start(self.poiResultLocation);
self.positionPicker = positionPicker;
});
}
}
};
},
mounted() {
this.$nextTick(() => {});
},
methods: {
dianji() {
// 拿到高德原生组件实例
// map:amapManager.getMap()
this.mouseTool.close(true)
console.log(this.mouseTool)
},
addMark() {
// marker.setMap(o);
}
},
props: {
// 经度
lngitude: {
type: [String, Number]
},
// 纬度
latitude: {
type: [String, Number]
},
// 地址
address: {
type: [String, Number]
},
// 地标
landmark: {
type: [String, Number]
},
radius: {
type: [String, Number]
}
}
};
</script>
<style lang="scss">
.geo-info {
margin-top: 20px;
height: 600px;
}
.name {
text-overflow: ellipsis;
overflow: hidden;
}
.addr {
font-size: 12px;
color: #b4b4b4;
}
.highlighted .addr {
color: #ddd;
}
</style>
