vue 高德地图 —— 点标记、信息弹窗、网页导航、获取经纬度及当前城市信息
新建 components/amap.vue 文件，封装高德地图组件：
<template>
<div>
<div id="amapcontainer" style="width: 800px; height: 520px">div>
div>
template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
securityJsCode: '' // '「申请的安全密钥」',
}
export default {
name: "purchannel",
data () {
return {
zoom: 12,
originX: '',// 当前浏览器定位的位置
originY: '',
map: null, //地图实例
infoWindow: '',
makerList: [],
provinceArr: [],
cityArr: [],
provinceCode: '',
cityCode: '',
storeList: [], //门店列表
}
},
watch: { },
created () { },
mounted () {
// DOM初始化完成进行地图初始化
this.initAMap()
},
methods: {
initAMap () {
AMapLoader.load({
key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker',
'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
// 获取到作为地图容器的DOM元素，创建地图实例
this.map = new AMap.Map("amapcontainer", { //设置地图容器id
resizeEnable: true,
zoom: this.zoom, // 地图显示的缩放级别
viewMode: "3D", // 使用3D视图
zoomEnable: true, // 地图是否可缩放，默认值为true
dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
// center: [113.370824, 23.131265], // 中心点坐标 广州
// mapStyle: "amap://styles/darkblue", // 设置颜色底层
});
this.getLocation()
this.setupMapTool()
this.searchCityInfo()
// 地图点击事件，点击获取经纬度;
this.map.on("click", (e) => {
// 获取经纬度
// console.log('map click', e, e.lnglat.getLng(), e.lnglat.getLat());
this.infoWindow.close()
})
}).catch(e => {
console.log(e);
})
},
setupMapTool () {
// 添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
let controlBar = new AMap.ControlBar({
position: {
top: '10px',
left: '10px',
},
});
let toolBar = new AMap.ToolBar({
position: {
top: '110px',
left: '35px'
}
});
this.map.addControl(controlBar); // 方向盘
this.map.addControl(toolBar); // 添加右下角的放大缩小
this.map.setDefaultCursor("pointer"); // 使用CSS默认样式定义地图上的鼠标样式
},
searchCityInfo () {
// 获取当前城市，省份，经纬度范围
const citySearch = new AMap.CitySearch()
citySearch.getLocalCity((status, result) => {
// console.log('citySearch', status, result);
if (status === 'complete' && result.info === 'OK') {
// 查询成功，result即为当前所在城市信息
this.getDivision(0, 1, result.province, result.city)
} else {
console.log('CitySearch出错')
}
})
},
// 从高德地图api获取浏览器定位
getLocation () {
let geolocation = new AMap.Geolocation({
// 是否使用高精度定位，默认：true
enableHighAccuracy: true,
// 设置定位超时时间，默认：无穷大
timeout: 10000,
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
zoomToAccuracy: true,
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
})
geolocation.getCurrentPosition((status, result) => {
// console.log('getCurrentPosition', status, result)
if (status == 'complete') {
// result是具体的定位信息
this.originX = result.position.lat
this.originY = result.position.lng
} else {
console.log('定位出错', result);
}
})
},
// 增加点标记
setMapMarker () {
// 创建 AMap.Icon 实例
let icon = new AMap.Icon({
size: new AMap.Size(36, 36), // 图标尺寸
image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", // Icon的图像
imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
imageOffset: new AMap.Pixel(0, 0) // 图像相对展示区域的偏移量，适于雪碧图等
});
//信息窗口实例
this.infoWindow = new AMap.InfoWindow({
anchor: "top-left",
offset: new AMap.Pixel(0, -30)
});
let makerList = []
this.storeList.forEach((item) => {
// 遍历生成多个标记点
let marker = new AMap.Marker({
map: this.map,
zIndex: 9999999,
icon: icon, // 添加 Icon 实例
offset: new AMap.Pixel(-13, -30), //icon中心点的偏移量
position: [item.locationX, item.locationY] // 经纬度对象new AMap.LngLat(x, y)，也可以是经纬度构成的一维数组[116.39, 39.9]
});
let content =
''
+ ''
+ item.name + ''
+ ''
+ '地 址：'
+ item.address + ''
+ ''
+ '电 话：'
+ item.phone + ''
+ ''
marker.content = content
marker.on("click", this.markerClick)
// marker.emit('click', { target: marker });// 此处是设置默认出现信息窗体
makerList.push(marker)
});
this.makerList = makerList
this.map.add(makerList)
// 自动适应显示想显示的范围区域
this.map.setFitView();
},
// 控制标记的信息窗体的显示
markerClick (e) {
// 标注的点击事件
this.infoWindow.setContent(e.target.content);
this.infoWindow.open(this.map, e.target.getPosition());
},
// 开始定位
beginLocate (x, y, index) {
// console.log('x,y,this.makerList[index].content', this.makerList[index], x, y)
this.map.panTo([x, y]) //设置地图中心点
if (this.makerList[index]) {
this.infoWindow.setContent(this.makerList[index].content)
}
this.infoWindow.open(this.map, [x, y])
},
// 地图导航
beginNav (address, y, x) {
let trimAdd = address.replace(/\s+/g, "");
let src = `https://uri.amap.com/navigation?from=${this.originY},${this.originX},当前位置&to=${y},${x},${trimAdd}&policy=1&coordinate=gaode&callnative=0`
window.open(src)
},
/**
* @param code 编码
* @param layer 层级 默认1级（省份）
* @param province 默认地址 省份
* @param city 默认地址 城市
* 查询行政区域
*/
getDivision (code = 0, layer = 1, province, city) {
let data = {
parentCode: code
};
this.$http({
method: 'GET',
url: this.baseURI + "dictionary/queryDivision.json",
params: data
}).then(res => { //接口返回数据
if (res.data.mobBaseRes.code == 100) {
if (layer == 1) {
this.provinceArr = res.data.mobBaseRes.result;
if (province) {
this.provinceArr.forEach((value, index, arr) => {
if (arr[index].name == province) {
this.provinceCode = arr[index].code;
this.getDivision(this.provinceCode, 2, province, city)
}
})
}
} else {
this.cityArr = res.data.mobBaseRes.result;
if (city) {
this.cityArr.forEach((value, index, arr) => {
if (arr[index].name == city) {
this.cityCode = arr[index].code;
this.querychannel(this.cityCode)
}
})
}
}
}
}).catch(err => {
})
},
/**
* @param id 渠道id
* 查询指定行政区域的 marker 定位信息
*/
querychannel (id) {
let data = {
'divisionCode': id
};
this.$http({
method: 'GET',
url: this.baseURI + "services/channel/info/list.json",
params: data
}).then(res => { //接口返回数据
if (res.data.mobBaseRes.code == 100) {
this.storeList = res.data.mobBaseRes.datas || []
if (this.storeList.length) {
this.setMapMarker()
} else {
this.removeMarker()
}
}
}).catch(err => {
})
},
// 清除点
removeMarker () {
if (this.makerList) {
// 移除已创建的 marker
this.map.clearMap() // 清除所有覆盖物（点标志）
this.makerList = []
}
}
}
}
script>
<style lang="less" scoped>
style>
接下来，在需要使用的组件中引入 amap.vue：
<template>
<div>
<map-container>map-container>
div>
template>
<script>
import MapContainer from "@/components/amap";
export default {
name: "purchannel",
components: { MapContainer },
data () {
return { }
},
watch: {},
created () { },
mounted () { },
methods: {
}
}
script>
<style lang="less" scoped>
style>