高德地图使用小结

在最近的一个项目中，项目中使用到了高德地图。业务是在地图上呈现多边形（动态生成），然后点击多边形出现对应地域的气象数据。鉴于高德地图的API比较晦涩，在这里总结一些工作中常用的知识点。

地图的引入，展现就不说明了。只总结一些业务逻辑。

一、点标记和信息窗体

点标记和信息窗体往往是同时出现的。有这些小知识点：

（1）点标记和信息窗体一起出现

//    标记
    var marker = new AMap.Marker({
        position: [116.39,39.9],//marker所在的位置
//        map:map//创建时直接赋予map属性
        animation:'AMAP_ANIMATION_DROP'
    });
    marker.setMap(map);

    var info = new AMap.InfoWindow({
        content:'维度39.9'+'<br />'+'经度116.39',
        offset:new AMap.Pixel(0,-28),
    });
    map.setFitView();//根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别
    info.open(map,marker.getPosition());//信息窗体跟随标记

（2）点击地图任意位置出现点标记和信息窗体

//    为地图注册点击事件，获取鼠标点击的经纬度坐标
    map.on('click', function(e) {

        document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
        marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()])//点哪里就出现哪里的标记

//        点击出现标记和信息窗体
        var info = new AMap.InfoWindow({
            content:"经度："+e.lnglat.getLng()+'<br />'+'维度:'+e.lnglat.getLat(),
            offset:new AMap.Pixel(0,-28)
        });
        map.setFitView();//根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别
        info.open(map,marker.getPosition());
    });
    marker.setMap(map);//如果不重置，则之前的点标记不会消失

（3）点击标记出现信息窗体

信息窗体自带关闭按钮，关闭后需要再次点击标记出现信息窗体

AMap.event.addListener(marker,'click',function(){
             info.open(map,marker.getPosition());  
})

（4）多个点标记同时展现在地图上

var markers = [{
        position: [116.205467, 39.907761]
    }, {
        position: [116.368904, 39.913423]
    }, {
        position: [116.305467, 39.807761]
    }];
    // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
    markers.forEach(function(marker) {
        new AMap.Marker({
            map: map,
            icon: marker.icon,
            position: [marker.position[0], marker.position[1]],
            offset: new AMap.Pixel(-12, -36)
        });
    });

二、逆地理编码

逆地理编码也就是将经纬度转化为地理坐标。

使用时，直接引入

var lnglatXY=[116.396574, 39.992706];//地图上所标点的坐标
AMap.plugin('AMap.Geocoder',function(){//回调函数
    //实例化Geocoder
    geocoder = new AMap.Geocoder({
        city: "010"//城市，默认：“全国”
    });
    //TODO: 使用geocoder 对象完成相关功能
  
    geocoder.getAddress(lnglatXY, function(status, result) {     
if (status === 'complete' && result.info === 'OK') {     //获得了有效的地址信息: //即，
        result.regeocode.formattedAddress 
   }else{ //获取地址失败 } }); 
})

实际工作中，点击地图，出现信息窗体和地理位置

//为地图注册click事件获取鼠标点击出的经纬度坐标
                var mapmessage = '';
                var coordinate = '';
                var clickEventListener = map.on('click', function(e) {
                    //获取坐标
                   coordinate =  e.lnglat.getLng() + ',' + e.lnglat.getLat();
                    //marker
                   AMap.plugin('AMap.Geocoder',function(){
                        var geocoder = new AMap.Geocoder({
                        city: "010"//城市，默认：“全国”
                    }); 
                        geocoder.getAddress(e.lnglat,function(status,result){
                        if(status=='complete'){
                             marker.setPosition([e.lnglat.getLng(),e.lnglat.getLat()])

                            _this.mapmessage = result.regeocode.formattedAddress;   

                            var info = new AMap.InfoWindow({
                                content:_this.mapmessage+'<br />'+'维度：'+_this.latID+'<br />'+'经度：'+_this.lngID,
                                offset:new AMap.Pixel(0,-28),
                            });
                            map.setFitView();//根据地图上添加的覆盖物分布情况，
自动缩放地图到合适的视野级别
                            info.open(map,marker.getPosition());  
                            
                            AMap.event.addListener(marker,'click',function(){
                                info.open(map,marker.getPosition());  
                            })
                        }
                        })         
                    })

搜索服务

类似上图，在地图上搜索时，出现自动搜索，然后点击后自动跳转到对应的地点。代码如下：

首先你要引入AMap.Autocomplete、AMap.PlaceSearch两个插件。我是在src中引入的。

输入框：

<div class="autoclass" style="width:240px">
     <input type="text" id="tipinput" name="keyword" value="" placeholder="请输入地址"/>
</div>
//输入提示
var autoOptions = {
    input: "tipinput"//使用现象输入的input的id
};
    var auto = new AMap.Autocomplete(autoOptions);//输入提示
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    var placeSearch = new AMap.PlaceSearch({
           map: map,
           extensions:String,
           pageSize:1//显示多少个点
    });  //构造地点查询类
function select(e) {
 placeSearch.setCity(e.poi.adcode);
 placeSearch.search(e.poi.name); //关键字查询查询
}

以上的代码就能实现搜索，点击跳转了。

这个时候，地图上出现的marker点击后，出现的是name和电话。如果我们需要修改这个弹出窗体，需要再对placeSearch使用markerClick事件：

//搜索后的mark点击事件,与页面打开时保持一致。否则显示地址+电话
                AMap.event.addListener(placeSearch, "markerClick", function(e){
                    marker.setPosition([e.data.location.lng,e.data.location.lat])

                    _this.mapmessage = e.data.name;

                    var info = new AMap.InfoWindow({
                        content:_this.mapmessage+'<br />'+'经度：'+e.data.location.lng+'<br />'+'纬度：'+e.data.location.lat,
                        offset:new AMap.Pixel(0,-28),
                    });
                    map.setFitView();//根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别
                    info.open(map,marker.getPosition());

                    AMap.event.addListener(marker,'click',function(){
                        info.open(map,marker.getPosition());
                    })
                });

如果我们需要清除地图上的点，官网给出的是clear()方法，在实际使用中，我们需要使用placeSearch .render.markerList.clear()来实现

if(placeSearch ){
                placeSearch .clear();
                if(placeSearch .render){
                    placeSearch .render.markerList.clear();
                }
            }

clear方法删除外圈的圆，接着是清空所有的placeSearch 中的点标记。