web開發如何使用高德地圖API（三）點擊熱點打開信息窗體

說兩句：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>

點擊熱點打開信息窗體所用到的JSapp

//建立一個信息窗體
var infoWindow=new AMap.AdvancedInfoWindow({});
var placeSearch = new AMap.PlaceSearch({
        city:'北京',//城市範圍
        map:map
    })

map.on('hotspotclick', function(result) {
    placeSearch.getDetails(result.id, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            placeSearch_CallBack(result);
        }
    });
});
//回調函數（組裝數據，設置窗體內容和位置）
function placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat);
    console.log(data);//能夠打印出來看一下返回數據的結構
    var poiArr = data.poiList.pois;
    var location = poiArr[0].location;
    infoWindow.setContent(createContent(poiArr[0]));
    infoWindow.open(map,location);//開啓信息窗體
}
function createContent(poi) {  //信息窗體內容
    var s = [];
    s.push('<div class="info-title">'+poi.name+'</div><div class="info-content">'+"地址：" + poi.address);
    s.push("電話：" + poi.tel);
    s.push("類型：" + poi.type);
    s.push('<div>');
    return s.join("<br>");
}

效果圖（來自高德開放平臺，可能稍有誤差）