高德 开发 地图 JS API 开发指南 其他功能 插件的使用

更新时间:2017年05月23日

JavaScript API在基础的地图图层和覆盖物功能之外提供了众多接口,这些接口包括常用的地图控件、丰富的服务接口、有用的地图工具类插件等等,这些接口可以统称为插件类。

插件的加载

这些插件类的功能代码并不包含在JSAPI的主体代码之中,所以在使用这些插件类之前,需要先将这些插件的代码加载下来。目前有异步和同步两种加载方式:

一、异步加载

这种加载方式,在需要使用到插件类的地方临时通过AMap.plugin方法将插件资源加载下来,具有地图初次加载体积较小的特点,缺点是使用时需要在异步加载的回调中再初始化插件。示例代码如下:

<script type="text/javascript" data-src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> 
<script type="text/javascript" >
    var map = new AMap.Map('mapContainer',{
        zoom:12,
        center:[116.39,39.9]
    });
    AMap.plugin('AMap.ToolBar',function(){//异步
        var toolbar = new AMap.ToolBar();
        map.plugin(toolbar);
    });
</script>

同时需要加载多个插件的时候,AMap.plugin方法的第一个参数使用数组形式,如:

AMap.plugin(['AMap.ToolBar','AMap.Geolocation','AMap.Scale'],function(){
    //TODO:几个插件的初始化
});

二、同步加载

这种加载方式,将需要的插件名称作为plugin参数跟在JavaScript API的入口文件的引用URL种,插件的代码将随着JavaScript API的主体文件一同下载下来。之后便不再需要使用AMap.plugin方法来加载插件资源,代码相对简洁。示例代码如下:

<script type="text/javascript" data-src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.ToolBar"></script> 
<script type="text/javascript" >
    var map = new AMap.Map('mapContainer',{
        zoom:12,
        center:[116.39,39.9]
    });
    var toolbar = new AMap.ToolBar();
    map.plugin(toolbar);
</script>

同时需要加载多个插件的时候,plugin参数以逗号分割多个插件名称,如:

<script type="text/javascript" data-src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>

插件的事件绑定和移除

大部分插件提供了事件功能,插件事件功能的使用与Map类和覆盖物等类型一样有两种方式,分别是使用AMap.event命名空间和使用插件自身的on、off方法。示例代码如下:

<script type="text/javascript" data-src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //输入提示
    var auto = new AMap.Autocomplete({
         input: "tipinput"
    });
    //POI搜索
    var placeSearch = new AMap.PlaceSearch({
        map: map
    }); 
    var select = function(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
    }
    //方式一:
    var listener = AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发
    //AMap.event.removeListener(listener);//需要时这样移除
    //======================
    ////方式二:
    ////用on和off方法
    //auto.on('select',select)
    ////auto.off('select',select)//移除的方法
    //======================
})
</script>






移动端
示例中心
功能
在线体验
常见问题