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.4
v: "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-button
type="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-button
type="success"
icon="el-icon-success"
@click="saveRectangle"
>保存围栏</el-button
>
<el-button
type="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, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
position: "LB", //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: 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;
// 实例化PlaceSearch
const 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;
}