web开发如何使用高德地图API（二）结合输入提示和POI搜索插件

2021-03-30 08:24

阅读：559

标签：keyword listener 输入提示 .com 外链 stat 结合属性 oom

说两句：

以下内容除了我自己写的部分，其他部分在高德开放平台都有（可点击外链访问）。
我所整理的内容以实际项目为基础希望更有针对性的，更精简。

准备工作：

首先，注册开发者账号，成为高德开放平台开发者
登陆之后，在进入「应用管理」页面「创建新应用」
为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

拿到key之后，在页面引入高德API和UI组件库以及相关CSS文件

显示基础地图所用到的HTML和JS

引入高德地图工具包js文件

编写输入提示需要的HTML标签

就是在中加入一个id唯一的输入框，用于提示框的绑定

输入提示和POI搜索插件用到的JS

AMap.plugin([‘AMap.Autocomplete‘,‘AMap.PlaceSearch‘],function(){
    var autoOptions = {
        city: "北京", //城市，默认全国
        input: "keyword"//使用联想输入的input的id（也就是上边那个唯一的id）
    };
    autocomplete= new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        city:‘北京‘,
        map:map
    })
    AMap.event.addListener(autocomplete, "select", function(e){
        //TODO 针对选中的poi实现自己的功能
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name)
    });
});

效果图

...