web開發如何使用高德地圖API（二）結合輸入提示和POI搜索插件

時間 2019-11-24

標籤 web 開發如何使用地圖 api 結合輸入提示 poi 搜索插件欄目 HTML 简体版

原文原文鏈接

說兩句：javascript

如下內容除了我本身寫的部分，其餘部分在高德開放平臺都有（可點擊外鏈訪問）。
我所整理的內容以實際項目爲基礎但願更有針對性的，更精簡。
點擊直奔主題。

準備工做：css

首先，註冊開發者帳號，成爲高德開放平臺開發者
登錄以後，在進入「應用管理」頁面「建立新應用」
爲應用添加 Key，「服務平臺」一項請選擇「 Web 端 ( JSAPI ) 」

拿到key以後，在頁面引入高德API和UI組件庫以及相關CSS文件java

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.3&key=3853mark的key不告訴你138eacc13d55806d&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

顯示基礎地圖所用到的HTML和JSweb

<body>
<div id="container"></div>
</body>

<script type="text/javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:11,
        center: [116.397428, 39.90923]//默認的地圖中心經緯度
    });
</script>

引入高德地圖工具包js文件api

<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

編寫輸入提示須要的HTML標籤瀏覽器

就是在<body>中加入一個id惟一的輸入框，用於提示框的綁定

<div>
    <input id="tipinput" class="form-control input-style" placeholder="請輸入關鍵字" value=""/>
</div>

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

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)
    });
});