文章目录
- 地图控件
- 地图控件的添加和移除
- 简易缩放按钮
- 3D 控制罗盘
- 信息窗体
- 默认样式信息窗体
- 信息窗体锚点
- 自定义样式信息窗体(重点)
- 信息窗体内的事件交互(重点)
- 带检索功能的信息窗体
- 给多个点添加信息窗体
地图控件
地图控件的添加和移除
官方提供的地图控件比较丑陋,使用者可以自己设计地图控件样式,结合基础的地图操作API,实现相应的功能。
给地图添加比例尺、缩放工具条、鹰眼等控件
var scale = new AMap.Scale({
visible: false
}),
toolBar = new AMap.ToolBar({
visible: false
}),
overView = new AMap.OverView({
visible: false
}),
map = new AMap.Map("container", {
resizeEnable: true
});
map.addControl(scale);
map.addControl(toolBar);
map.addControl(overView);
简易缩放按钮
使用简易模式下的缩放按钮。
AMap.plugin([
'AMap.ToolBar',
], function () {
// 在图面添加工具条控件,工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(new AMap.ToolBar({
}));
});
3D 控制罗盘
3D 地图模式下为地图添加控制罗盘
// 创建地图实例
var map = new AMap.Map("container", {
zoom: 13,
center: [116.43, 39.92],
resizeEnable: true,
viewMode: '3D',
pinch: 45
});
AMap.plugin([
'AMap.ControlBar',
], function(){
// 添加 3D 罗盘控制
map.addControl(new AMap.ControlBar());
});
信息窗体
默认样式信息窗体
展示创建默认样式的信息窗体,以及信息窗体的打开操作。
infoWindow = new AMap.InfoWindow({
content: info.join("") //使用默认信息窗体框样式,显示信息内容
});
infoWindow.open(map, map.getCenter());
content的内容就是innerHTML,可以自己创建。
信息窗体锚点
信息窗体锚点设置。
//构建自定义信息窗体
var infoWindow = new AMap.InfoWindow({
anchor: 'top-left',
content: '这是信息窗体!这是信息窗体!',
});
function setAnchor(){
var anchor = this.id;
infoWindow.setAnchor(anchor)
}
anchor的默认值:‘bottom-center’
可选值:‘top-left’|‘top-center’|‘top-right’|‘middle-left’|‘center’|‘middle-right’|‘bottom-left’|‘bottom-center’|‘bottom-right’
自定义样式信息窗体(重点)
展示如何创建自定义样式的信息窗体,以及如何点击Marker打开信息窗体。
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: createInfoWindow(title, content.join("<br/>")),
offset: new AMap.Pixel(16, -45)
});
将infoWindow的isCustom属性设为true,可自定义信息窗体的样式,map.clearInfoWindow();可以关闭当前地图所有的infoWindow ,单个的关闭,可以调用infoWindow的close方法。
信息窗体内的事件交互(重点)
展示对信息窗体内的 DOM 元素添加自定义事件的方式。
// infowidnow 的 innerHTML
var infoWindowContent =
'<div className="custom-infowindow input-card">' +
'<label style="color:grey">故宫博物院</label>' +
'<div class="input-item">' +
'<div class="input-item-prepend">' +
'<span class="input-item-text" >经纬度</span>' +
'</div>' +
'<input id="lnglat" type="text" />' +
'</div>' +
// 为 infowindow 添加自定义事件
'<input id="lnglat2container" type="button" class="btn" value="获取该位置经纬度" οnclick="getLngLat()"/>' +
'</div>';
// 创建一个自定义内容的 infowindow 实例
var infoWindow = new AMap.InfoWindow({
position: lnglat,
offset: new AMap.Pixel(0, -35),
content: infoWindowContent
});
infoWindow.open(map);
// 将当前经纬度展示在 infowindow 的 input 中
function getLngLat(){
var lnglatInput = document.getElementById('lnglat');
lnglatInput.setAttribute('value', lnglat.toString());
}
获取DOM的方法document.getElementById(‘lnglat’);在Vue中使用时,需要将其放到setTimeout函数中,否则获取不到DOM元素。
setTimeout(() => {
//给DOM元素绑定单击事件
var closeBtn = document.getElementById('closeBox');
AMap.event.addDomListener(closeBtn, 'click', (e) => {
this.map.clearInfoWindow();
});
}, 10)
带检索功能的信息窗体
使用AdvancedInfoWindow,可创建带检索功能的信息窗体,并可设置搜索功能。
该功能高度定制了高德地图的特有功能
var infowindow1 = new AMap.AdvancedInfoWindow({
content: content,
offset: new AMap.Pixel(0, -30)
});
var infowindow2 = new AMap.AdvancedInfoWindow({
content: content,
asOrigin: false,
asDestination: false,
offset: new AMap.Pixel(0, -30)
});
var infowindow3 = new AMap.AdvancedInfoWindow({
content: content,
placeSearch: false,
asDestination: false,
offset: new AMap.Pixel(0, -30)
});
给多个点添加信息窗体
给多个点标记添加单击打开信息窗体的事件。
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
for (var i = 0, marker; i < lnglats.length; i++) {
var marker = new AMap.Marker({
position: lnglats[i],
map: map
});
marker.content = '我是第' + (i + 1) + '个Marker';
marker.on('click', markerClick);
marker.emit('click', {target: marker});
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
该示例采用了模拟事件的方法,但是在Vue不好用,最好把事件的回调函数写到每个marker中。