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项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...
随机推荐
- bzoj1297 [SCOI2009]迷路——拆点+矩阵快速幂
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1297 一看感觉是矩阵快速幂之类的,但边权不好处理啊: 普通的矩阵快速幂只能处理边权为1的,所 ...
- ubuntu系统快捷键设置
1.打开'系统设置' 2.点击键盘 3.选择快捷键,查看和修改对应的快捷键.
- PCB SQL SERVER 正则应用实例
我们用过SQL SERVER的都知道,SQL SERVER它本身是不自带正则表达式的,因为没有,所以基本都没用过啊, 但我们在C#中对文本匹配用正则的方式处理非常好用,省得你写一堆代码实现匹配,多简洁 ...
- BZOJ 4140 凸包+二进制分组
思路: $(x_0-x)^2+(y_0-y)^2<=x^2+y^2$ $y>=(-x_0/y_0)x+(x_0^2+y_0^2)/2y0$ 这显然就是凸包了 以一个斜率不断向下(上)走 ...
- ACM_整数反转
整数反转 Time Limit: 2000/1000ms (Java/Others) Problem Description: 给定一个32位int型的整数,把这个整数反着输出,如123,输出321. ...
- 题解报告：hdu 1285 确定比赛名次
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1285 Problem Description 有N个比赛队(1<=N<=500),编号依次 ...
- 【转】Linux GCC常用命令
转自:http://www.cnblogs.com/ggjucheng/archive/2011/12/14/2287738.html 1简介 2简单编译 2.1预处理 2.2编译为汇编代码(Comp ...
- UE4源码版食用要记
UE4源码版和预编译版不能共享工程,这和插件版是一样的. 一般来说我都是在VS中生成编辑器,于编辑器中添加新类,VS中编辑代码. 编译引擎的时候编译配置使用的是devepolmenteditor.开发 ...
- MyBatis 配置控制台上显示sql语句（log4j.properties 之三）
### direct log messages to stdout ###log4j.appender.stdout=org.apache.log4j.ConsoleAppenderlog4j.app ...
- Eclipse中搭建Apache Tomcat7源码调试环境
第一步:获取Apache Tomcat7源码,读者可以从Apache 官方网站获取,官方下载地址: http://tomcat.apache.org/download-70.cgi 注意选择Sourc ...