说两句：

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

准备工作：

  • 首先，注册开发者账号，成为高德开放平台开发者
  • 登陆之后，在进入「应用管理」 页面「创建新应用」
  • 为应用添加 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>");

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

web开发如何使用高德地图API（三）点击热点打开信息窗体的更多相关文章

  1. web开发如何使用高德地图API（四）通过AMap.Marker自定义标点

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

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

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  3. web开发如何使用高德地图API（一）浏览器定位

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  4. web开发如何使用百度地图API（一）判断点是否在范围内

    准备工作 注册开发者 创建应用 拿到百度地图ak 前端实现方案 引入百度地图API和工具类库 <script type="text/javascript" src=" ...

  5. [WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程

      前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情   高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...

  6. 【高德地图API】那些年我们一起开发的APP—即LBS应用模式分享

    原文:[高德地图API]那些年我们一起开发的APP—即LBS应用模式分享 摘要:利用地图API都能做些什么应用呢?应用商店里所有的分类,都可以结合上LBS来丰富应用.除了传统的生活服务应用,还有新潮的 ...

  7. 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  8. 安卓开发笔记①：利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边（位置）

    高德地图开发时需要导入的包在下面的网盘链接中:(由于高德地图api更新得太快,官网上最新的包使用起来没有之前的方便,所以以下提供最全面的原始包) 链接:http://pan.baidu.com/s/1 ...

  9. 微信小程序-基于高德地图API实现天气组件(动态效果)

    微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...

随机推荐

  1. 二分查找法（binary search）

    二分查找法:一种在有序列表中查找某个值的算法,它每次都将待查找的空间分为两半,在其中一般继续查找. 使用二分查找的前提是:已经排序好的列表.否则,sum对其查找的结果不做保证. 代码实现: // 使用 ...

  2. B2761 [JLOI2011]不重复数字 离散化

    就是一道离散化的裸题,但是在写的时候遇到了一些不可描述的问题,但是还是很顺利的. 题干: Description 给出N个数,要求把其中重复的去掉,只保留第一次出现的数. 例如,给出的数为1 ,其中2 ...

  3. 理解JavaScript中的闭包

    (这篇文章后面关于onclick事件的解释是错误的,请不要被误导了2016.6.16) 闭包这个概念给JavaScript初学者心中留下了巨大的阴影,网络上关于闭包的文章不可谓不多,但是能让初学者看懂 ...

  4. [Apple开发者帐户帮助]八、管理档案（3）创建App Store配置文件

    您可以创建自己的App Store配置文件,以便在将应用程序上载到App Store Connect时使用. 有关完整的App Store工作流程,请转到通过 Xcode帮助中的App Store分发 ...

  5. [Swift通天遁地]四、网络和线程-(2)通过BlockOperation实现线程的队列

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. Codeforces 19E 树上差分

    思路: 先随便建出来一棵搜索树(图可能不连通?) 每一条非树边(剩下的边)和树边都可以构成一个环. 我们只看一个非树边和某些树边构成的这些环. 分成三种情况: 1.没有奇环  所有边都可以删 2.有一 ...

  7. BZOJ 3998 后缀数组

    思路: 第一问 建出来后缀数组以后  前缀和一发n-sa[i]-ht[i]+1  二分 第二问 二分判断是带重复的第几 怎么判断呢   找到它  往后扫ht递减sum+=它   跟K判判 注意等于 加 ...

  8. 批量建文件夹【win7企业版】

    在记事本中notepad.exe按如下格式编辑好 md + 空格 + 文件夹名字(多个之间用空格隔开) 保存为.bat格式,运行即可批量创建文件夹.

  9. SVN异常处理(五)-状态小图标不见了

    1.发现问题 装了Win10,再装了Office2016等一些最新软件后,发现SVN状态小图标竟然就不见了 2.分析问题 在Window系统中,当UAC启动时,有些应用程序的图标上会显示一个盾牌,像这 ...

  10. sql 列集合转换成逗号分隔的字符类型

    CREATE function [dbo].[getGroupPath](@groupId int) returns nvarchar(2000) as begin declare @path nva ...