web开发如何使用高德地图API（三）点击热点打开信息窗体

说两句：

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

准备工作：

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

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

<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和JS

<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文件

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

点击热点打开信息窗体所用到的JS

//创建一个信息窗体
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>");
}

效果图（来自高德开放平台，可能稍有偏差）

相关阅读:
变量和值的延伸思考
 一念之想--多维数组
 java扫描控制台输入
 java字符转义
 javaee开发工具及环境配置过程
 java数组、泛型、集合在多态中的使用及对比
 flex的Accordion组件头部文本居中显示
 Visual Studio解决方案及项目的配置
 Away3D引擎学习入门笔记
 使用photoshop，把图片背景变成透明
原文地址：https://www.cnblogs.com/meng-ma-blogs/p/9285242.html