<template>
<view class="content">
<div id="container" @click="admin"></div>
</view>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
data() {
return {
map: '',
polyEditor: '',
polygon:''
}
},
onLoad() {
this.init();
},
methods: {
admin() {
console.log(this.map);
},
createPolygon() {
},
open(){
},
close(){
},
init() {
let that = this;
AMapLoader.load({
key: "f02a5ba3169d0c5690beeae5a0bc9354", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap) => {
that.map = new AMap.Map("container", { //设置地图容器id
viewMode: "3D", //是否为3D地图模式
center: [116.471354, 39.994257],
zoom: 16.8
});
var path2 = [
[116.474595, 40.001321],
[116.473526, 39.999865],
[116.476284, 40.000917]
]
var polygon2 = new AMap.Polygon({
path: path2
})
that.map.add([ polygon2]);
that.map.setFitView();
that.map.plugin(["AMap.PolygonEditor"],function(){
// 实例化多边形编辑器,传入地图实例和要进行编辑的多边形实例
var polygonEditor = new AMap.PolygonEditor(that.map,polygon2);
// 开启编辑模式
polygonEditor.open();
});
setInterval(function(){
console.log(polygon2._opts.path); // 在这里10秒获取一次你修改的围栏 你可以写到data里面去 我这个写法不规范
},10000)
}).catch(e => {
console.log(e);
})
}
}
}
</script>
<style lang="scss">
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100vh;
}
</style>
.
关于使用高德地图电子围栏的前端api
于 2023-04-28 11:01:46 首次发布