高德地图的一些使用心得

高德地图是使用比较广的地图api，给开发者提供了调用api的实例和模板。

要使用高德地图，首先需要申请成为高德地图开发者，因为需要用到高德的key。

支持的开发端比较广

现在介绍一下js端的开发

首先是显示地图

很简单的

先加载高德的js文件

    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css"/>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.1&key={{ key }}"></script>

    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>

然后就可以开始在写js了

要显示地图需要一个div元素来展示

<div id="mapContainer"></div>

然后在js里面添加以下代码

        var map = new AMap.Map("mapContainer", {
            resizeEnable:true,
            center: [120.155070,30.274084],
            zoom: 13,
        });

mapContainer是展示地图的div的id，

resizeEnable就是是否可以调整地图大小

center是指地图的中心点的经纬度

zoom是指地图的层级

下面介绍下常用的插件

输入提示，搜索，以及经纬度查询

AMap.plugin(["AMap.Autocomplete","AMap.PlaceSearch", "AMap.Geocoder"], function(){
            placeSearch = new AMap.PlaceSearch({
                city: "杭州",
                map: map,
                pageSize: 1,
                pageIndex: 1,
            });
            geocoder = new AMap.Geocoder({
                city: "",
            })
            var autoOptions = {
                city: "杭州",
                input: "work-location"
            };
            autocomplete = new AMap.Autocomplete(autoOptions);
            AMap.event.addListener(autocomplete, "select", function(e){
                placeSearch.search(e.poi.name,function(status, result){
                });
            });
        });

Autocomplete是输入提示插件
只需要构造一个包含city城市和input(输入框id)的字典，作为参数传给AMap.Autocomplete
详情见http://lbs.amap.com/api/javascript-api/guide/map-data/input_prompt

PlaceSearch是搜索插件
只需要构造一个包含city和map(地图)的字典，作为参数传给AMap.PlaceSearch
常用的方法有search和searchNearBy，搜索关键词和搜索周边
详情见http://lbs.amap.com/api/javascript-api/guide/map-data/search

Geocoder是经纬度查询插件
构造一个包含city的字典，作为参数传给AMap.Geocoder
常用的方法有getAddress,getLocation分别用来用经纬度获取地址和地址获取经纬度
详情见http://lbs.amap.com/api/javascript-api/guide/map-data/geocoding
接着说下创建点标记

                                var marker = new AMap.Marker({
                                    map: map,
                                    title: name,
                                    position: location,
                                })
                                rentalMarkers.push(marker);
                                var label = new AMap.Marker({
                                    map: map,
                                    title: name,
                                    content: html,
                                    position: location,
                                    offset: new AMap.Pixel(-12,-12),
                                })
                                rentalLabels.push(label);

marker就是一个点标记，label是其对应的标注

最后要提到的是
点标记如何删除
如果是我们自己创建的点标记
可以使用map.remove(markers)删除
markers可以是一个点标记元素也可以是一个包含点标记元素的数组
如果是高德搜索周边得到的点标记就稍微麻烦一点

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

nearbySearch是一个PlaceSearch对象

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