高德地图 Web JS API示例学习笔记（10）——覆盖物（地图控件、信息窗体）

地图控件

地图控件的添加和移除

官方提供的地图控件比较丑陋，使用者可以自己设计地图控件样式，结合基础的地图操作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中。