高德地图开发(四、点标记事件与信息窗口)
一、点标记事件
// marker,点标记Marker对象
AMap.event.addListener(marker, 'click', function () {
openInfo(marker, lonlat);
})
二、信息窗口
因为默认样式不满足需求,所以要自定义样式,在初始化InfoWindow时加上isCustom: true则可以使用自定义窗体,不过那样全部都要自己写,所以还是使用默认窗体,但窗体外部样式以及内部样式重新定义了一下。
let info = document.createElement("div");
info.className = "infoWindow";
info.innerHTML = '自定义样式信息窗口';
//构建信息窗体中显示的内容
infoWindow = new AMap.InfoWindow({
content: info, //使用默认信息窗体框样式,显示信息内
});
infoWindow.open(map); // map是地图对象
/**
* 信息窗口主体
*/
.infoWindow{
position: relative!important;
box-shadow: none;
bottom: 0;
left: 0;
width: 15.75rem;
height: 13.5rem;
padding: 0;
color: #fff;
font-size: 12px;
}
/**
* 信息窗口外壳
*/
.amap-info-contentContainer .amap-info-sharp{
border-top: 8px solid rgba(0, 44, 71, .5);
}
/**
* 信息窗口箭头
*/
.amap-info-content{
background-color: rgba(0, 44, 71, .5);
}
/**
* 关闭按钮
*/
.amap-info-close{
right: 10px;
color: #fff;
}
三、指定信息窗口显示位置
窗口默认显示位置在地图右下角,现在要求显示在点击的点标记正上方,用下述代码就行了
infoWindow.open(map, lonlat); // lonlat为经纬度坐标[x, y]
四、效果与最终代码
// markerEvent在创建点标记后调用,这里不写了
function markerEvent (marker, lonlat) {
AMap.event.addListener(marker, 'click', function () {
openInfo(marker, lonlat);
})
}
function openInfo(marker, lonlat) {
let info = document.createElement("div");
info.className = "infoWindow";
info.innerHTML = '自定义样式信息窗口';
let infoHTML =
//构建信息窗体中显示的内容
infoWindow = new AMap.InfoWindow({
content: info, //使用默认信息窗体框样式,显示信息内
offset: new AMap.Pixel(16, -10)
});
infoWindow.open(map, lonlat);
}