PC端高德地图,自定义标记点图标和样式,自定义标记点悬浮框,自定义标记点点击框,并绑定标记点点击框事件
从最简单的开始,本人使用的是vue2开发,引入高德地图
npm安装高德地图
npm i @amap/amap-jsapi-loader --save
在页面使用
import AMapLoader from "@amap/amap-jsapi-loader";
// 在2021年以后申请的开发者key都需要配合安全密钥使用
window._AMapSecurityConfig = {
// 安全密钥
securityJsCode: "0c30xxxxxxxxxxxxxxxc912",
};
methods:{
// 注册地图
initMap() {
AMapLoader.load({
"key": "6b2fxxxxxxxxxxxxxxxxxx6f22", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": [
"AMap.MapType",
"AMap.Geocoder",
"AMap.AutoComplete"
], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI,缺省不加载
"version": '1.1', // AMapUI 版本
"plugins": ['overlay/SimpleMarker'], // 需要加载的 AMapUI ui插件
},
"Loca": { // 是否加载 Loca, 缺省不加载
"version": '2.0' // Loca 版本
},
})
.then((AMap) => {
let satellite = new AMap.TileLayer.Satellite();
let roadNet = new AMap.TileLayer.RoadNet();
this.layers = [satellite, roadNet]
let mapCenter = [120.121827,30.948273]
this.map = new AMap.Map("mapContainer", {
zoom: 15, //初始化地图级别
center: [lng, lat], //初始化地图中心点位置
layers: this.layers, //添加卫星图层,如果是标准图层则不需要添加这个属性
});
for (const value of this.markerList) {
// this.setMapMarker() 这个方法是批量添加标记点的方法
this.setMapMarker(value)
}
//点击获取经纬度;
this.map.on("click", (e) => {
// console.log(e)
});
})
.catch((err) => {
// 错误
// console.log(err);
});
},
// 批量添加标记点
setMapMarker(marker) {
let icon = new AMap.Icon({
size: new AMap.Size(40, 50), // 图标尺寸
image: `/images/slices/${marker.typeCode}_${marker.grade}.png`, // Icon的图像,这个图标必须放在public文件夹下面才能获取到
// imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量,适于雪碧图等
// imageSize: new AMap.Size(40, 50) // 根据所设置的大小拉伸或压缩图片
})
// 自动适应显示想显示的范围区域
this.map.setFitView();
this.marker = new AMap.Marker({
map: this.map,
position: [marker.longitude, marker.latitude],
offset: new AMap.Pixel(0, 30),
icon: icon,
});
// 自定义悬浮框的内容 data-id在原生上绑定自定义id属性
this.marker.content = `
<div data-id="${marker.architectureName}" class="mapMarker flex flex_column align_center">
</div>
`
// mouseover即为鼠标悬浮标记点上面要去执行的事件
this.marker.on('mouseover', this.infoOpen);
// mouseout即为鼠标离开标记点要去执行的事件
// this.marker.on('mouseout', ()=>{
// this.map.clearInfoWindow()即为关闭悬浮框的事件
// this.map.clearInfoWindow()
// });
// click点击标记点要去执行的事件
this.marker.on('click', this.onMarker);
// 自动适应显示想显示的范围区域
this.map.setFitView();
// 添加标记点
this.map.add(this.marker);
},
// 打开鼠标悬浮弹框方法,原封不动复制即可,注意map是在data中声明的全局变量所以可以用this,详见initeMap()方法
infoOpen(e) {
let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(15, 275)});
infoWindow.setContent(e.target.content);
infoWindow.open(this.map, e.target.getPosition());
},
// 点击标记点位方法
onMarker(e){
let marker
for (const value of this.markerList) {
// 这里去用正则获取你data-id上面绑定的内容,并且和点位列表对比,拿到点击的点位的信息,详见setMapMarker()方法this.marker.content这一行
if(value.architectureName == (/\"(.+?)\"/.exec(e.target.content)[1])){
marker = value
this.clickMarkerData = value
}
}
// 点击标记点之后去关闭地图上所有弹框
this.map.clearInfoWindow()
// 设置点击框的偏移量以及内容
let infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(15, 420), // 偏移量
isCustom: true, // 是否自定义内容
content: this.innerHtmlOnMarker(marker) //自定义点击框里面的内容
});
// 打开自定义点击框的方法
infoWindow.open(this.map, [marker.longitude, marker.latitude])
},
// 添加点击标记点的弹框信息
innerHtmlOnMarker(marker){
let info
// 注意模板字符串里面的所有图片都要放到public里面,不然找不到
// 注意下面这个οnclick="onPopupShow()"事件,绑定的原生事件
// 需要在mounted(){}里面定义全局方法
// mounted(){
// window全局对象上定义一个这样的方法
// window.onPopupShow = this.onPopupShow
// }
info = `
<div class="clickMarker flex flex_column align_center">
<div class="item align_center justify_center" οnclick="onPopupShow()">
<div class="txt">
查看历史数据
</div>
<img src="/images/slices/right_icon.png" alt="">
</div>
</div>
`
return info
},
}