Vue中使用VueAMap

npm 安装

npm install vue-amap --save

注册:高德地图

// 在main.js中注册:高德地图
import VueAMap from "vue-amap";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({key: "你的高德key",plugin: ["AMap.AutoComplete", //输入提示插件"AMap.PlaceSearch", //POI搜索插件"AMap.Scale", //右下角缩略图插件 比例尺"AMap.OverView", //地图鹰眼插件"AMap.ToolBar", //地图工具条"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制"AMap.PolyEditor", //编辑 折线多，边形"AMap.PolygonEditor", //编辑 折线多，边形"AMap.CircleEditor", //圆形编辑器插件"AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置],// 默认高德 sdk 版本为 1.4.4v: "2.0",
});

配置安全密钥

// 在public/index.html中配置<script type="text/javascript">// 使用高德，需要配置安全密钥window._AMapSecurityConfig = {securityJsCode: "xxx",};</script>

VueAMap使用

效果图

// 核心代码
<template><div class="app-container"><div class="main"><!-- 地图 --><div id="container" style="width: 100%; height: 500px" /><!-- 搜索 --><div class="info"><div class="input-item"><div class="input-item-prepend"><span class="input-item-text" style="width: 8rem">请输入关键字</span></div><input id="tipinput" type="text" style="margin-right: 5px" /><el-button type="primary" @click="onSearch" size="mini">搜索</el-button></div></div><!-- 控制按钮组 --><section class="section"><div class="ebox"><el-button-group><el-buttontype="info"icon="el-icon-circle-plus-outline"@click="drawRectangle":disabled="path.length > 0">绘制围栏</el-button><el-button type="primary" icon="el-icon-edit" @click="editRectangle">编辑围栏</el-button><el-buttontype="success"icon="el-icon-success"@click="saveRectangle">保存围栏</el-button><el-buttontype="danger"icon="el-icon-delete"@click="deleRectangle">删除围栏</el-button></el-button-group></div></section></div></div>
</template><script>
export default {name: "Society",data() {return {map: null, // 地图组件center: [114.0579, 22.5431], //地图中心位置，不能为空数组【为空数组会报错】path: [], //绘制的数据polyEditor: null, // polyEditor组件};},created() {},mounted() {setTimeout(() => {//异步加载（否则报错initMap is not defined）this.initMap();}, 1000);},methods: {// 地图初始化initMap() {this.map = new AMap.Map("container", {resizeEnable: true, // 窗口大小调整center: this.center, // 中心zoom: 15, //放大级别showLabel: true, // 是否显示地图文字标记});// 添加工具栏this.map.plugin(["AMap.ToolBar","AMap.AutoComplete","AMap.PlaceSearch","AMap.Geolocation",],() => {const toolbar = new AMap.ToolBar(); // 工具条this.map.addControl(toolbar);// 实例化Autocomplete 搜索const autoOptions = {//city 限定城市，默认全国city: "全国",input: "tipinput",};const AutoComplete = new AMap.AutoComplete(autoOptions);this.AutoComplete = AutoComplete;// AutoComplete.search(keyword, (status, result) => {//   console.log(status, result);//   // 搜索成功时，result即是对应的匹配数据// });// 获取定位工具const geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 10000, //超过10秒后停止定位，默认：无穷大maximumAge: 0, //定位结果缓存0毫秒，默认：0convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true, //显示定位按钮，默认：trueposition: "LB", //定位按钮停靠位置，默认：'LB'，左下角buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});this.map.addControl(geolocation);geolocation.getCurrentPosition((status, result) => {if (status == "complete") {this.$modal.msgSuccess("获取定位成功");this.center = [result.position.lng, result.position.lat];} else {this.$modal.msgWarning("获取定位失败");}});// 获取后端返回的数据,创建围栏if (this.path && this.path.length > 0) {const polygon = new AMap.Polygon({path: this.path,});// 创建围栏实例this.polyEditor = new AMap.PolyEditor(this.map, polygon);// 清空地图this.map.clearMap();// 地图添加围栏this.map.add(polygon);// 聚焦当前围栏this.map.setFitView(this.polyEditor.getTarget());}});},// 绘制多边形drawRectangle() {const This = this;// 创建并开启围栏编辑器const polyEditor = new AMap.PolygonEditor(this.map);this.polyEditor = polyEditor;polyEditor.close();polyEditor.setTarget();polyEditor.open();// 创建一个覆盖物之后触发该事件，target即为创建对象。// 当editor编辑对象为空时，调用open接口，再点击一次屏幕就会创建新的覆盖物对象polyEditor.on("add", (data) => {const polygon = data.target;// 添加吸附多边形围栏polyEditor.addAdsorbPolygons(polygon);This.map.setFitView([polygon]);// 围栏双击事件，编辑完后聚焦当前围栏polygon.on("dblclick", () => {polyEditor.setTarget(polygon);This.map.setFitView([polygon]);polyEditor.open();});});},// 编辑围栏editRectangle() {// 聚焦当前围栏,打开编辑this.map.setFitView(this.polyEditor.getTarget());this.polyEditor.open();},//保存围栏saveRectangle() {this.path = [];// 获取当前最新的坐标，并取消编辑状态this.polyEditor.getTarget().getPath().forEach((v) => {this.path.push([v.lng, v.lat]);});this.polyEditor.close();},// 删除围栏deleRectangle() {this.path = [];this.map.clearMap(); // 删除地图所有覆盖物},// 搜索onSearch() {const vm = this;const keyword = document.getElementById("tipinput").value;// 实例化PlaceSearchconst place = {map: vm.map,extensions: "all",autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围};const PlaceSearch = new AMap.PlaceSearch(place);PlaceSearch.search(keyword, (status, result) => {// 搜索成功时，result即是对应的匹配数据});},},
};
</script>
<style lang="scss" scoped>
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
</style>
<style lang="scss"scoped>
.amap-box {width: 100%;height: 600px;
}
.section {position: relative;
}.info {position: absolute;right: 0px;top: 0px;
}
</style>

如果在弹窗中使用VueAMap,需要全局引用改样式

// AMap.Autocomplete会被elment ui弹窗遮挡问题
.amap-sug-result {z-index: 99999 !important;
}