web开发如何使用高德地图API（三）点击热点打开信息窗体
说两句：
准备工作：
拿到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（三）点击热点打开信息窗体的更多相关文章
- web开发如何使用高德地图API（四）通过AMap.Marker自定义标点
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- web开发如何使用高德地图API（二）结合输入提示和POI搜索插件
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- web开发如何使用高德地图API（一）浏览器定位
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- web开发如何使用百度地图API（一）判断点是否在范围内
准备工作 注册开发者 创建应用 拿到百度地图ak 前端实现方案 引入百度地图API和工具类库 <script type="text/javascript" src=" ...
- [WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程
前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...
- 【高德地图API】那些年我们一起开发的APP—即LBS应用模式分享
原文:[高德地图API]那些年我们一起开发的APP—即LBS应用模式分享 摘要:利用地图API都能做些什么应用呢?应用商店里所有的分类,都可以结合上LBS来丰富应用.除了传统的生活服务应用,还有新潮的 ...
- 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...
- 安卓开发笔记①：利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边（位置）
高德地图开发时需要导入的包在下面的网盘链接中:(由于高德地图api更新得太快,官网上最新的包使用起来没有之前的方便,所以以下提供最全面的原始包) 链接:http://pan.baidu.com/s/1 ...
- 微信小程序-基于高德地图API实现天气组件(动态效果)
微信小程序-基于高德地图API实现天气组件(动态效果) 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...
随机推荐
- Android之仿今日头条顶部导航栏效果
随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...
- go语言笔记——是c开发的 lex yacc进行词法和语法分析，go不支持函数和运算符重载，不支持类型继承，也不支持断言，还有泛型
从 Go 1.0.3 版本开始,不再使用 8g,8l 之类的指令进行程序的构建,取而代之的是统一的 go build 和 go install 等命令,而这些指令会自动调用相关的编译器或链接器. 如果 ...
- JSP-Runoob：JSP 动做元素
ylbtech-JSP-Runoob:JSP 动做元素 1.返回顶部 1. JSP 动作元素 与JSP指令元素不同的是,JSP动作元素在请求处理阶段起作用.JSP动作元素是用XML语法写成的. 利用J ...
- Counterfeit Dollar
http://poj.org/problem?id=1013 #include<stdio.h> #include<string.h> #include<math.h&g ...
- [App Store Connect帮助]三、管理 App 和版本（3）查找 App
在“我的 App”中,使用工具栏控件快速查找 App. 搜索 App: 在搜索栏中输入文本. 您可以输入 App 的名称.Apple ID(App 标识符).套装 ID,或 SKU.套装 ID 和 S ...
- [Apple开发者帐户帮助]九、参考（6）支持的功能（watchOS）
watchOS扩展可用的功能取决于您的程序成员身份. 注意:对于watchOS应用程序目标,可用的功能是应用程序组和后台模式,并且不依赖于您的程序成员身份. 能力 ADP 企业 Apple开发者 应用 ...
- Vue电商SKU组合算法问题
前段时间,公司要做“添加商品”业务模块,这也算是电商业务里面的一个难点了. 令我印象最深的不是什么“组合商品”.“关联商品”.“关联单品”,而是商品SKU的组合问题. 这个问题特别有意思,当时虽然大体 ...
- php 静态属性和静态变量
- Axure基础教程
文字教程: https://www.axure.com.cn/3608/ 视频教程: http://www.iqiyi.com/playlist409963402.html
- [转]mysql视图学习总结
转自:http://www.cnblogs.com/wangtao_20/archive/2011/02/24/1964276.html 一.使用视图的理由是什么?1.安全性.一般是这样做的:创建一个 ...