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项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...
随机推荐
- poj1006生理周期(中国剩余定理)
生理周期 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 139224 Accepted: 44687 Descripti ...
- 微信小程序商品展示页面(仿咸鱼)
项目中做了一个商品发布展示的页面,记录下来 解决问题: 想在setData中更改数组具体下标中的某个值: let one = "lowMoney[" + 0 + "].m ...
- Codeforces 19E 树上差分
思路: 先随便建出来一棵搜索树(图可能不连通?) 每一条非树边(剩下的边)和树边都可以构成一个环. 我们只看一个非树边和某些树边构成的这些环. 分成三种情况: 1.没有奇环 所有边都可以删 2.有一 ...
- 【BZOJ3527】[ZJOI2014] 力（FFT）
题目: BZOJ3527 分析: FFT应用第一题-- 首先很明显能把\(F_j\)约掉,变成: \[E_j=\sum _{i<j} \frac{q_i}{(i-j)^2}-\sum_{i> ...
- android ListView，GridView 设置某一项显示位置
在项目中有时会用到,当使用 listview 想让它显示某一项,当它又不在前面的位置,可以 使用 //让某一项显示出来(否则可能不在当前) listview.setSelection(positio ...
- 【转】Linux中的LVM
转自:http://www.cnblogs.com/net2012/p/3365904.html 逻辑卷管理器,通过将另外一个硬盘上的分区加到已有文件系统,来动态地向已有文件系统添加空间的方法. 逻辑 ...
- Jupyter(Ipython) Notebook 入门
upyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言. 一般用来编写漂亮的交互式文档. 文学编程的读者不是机器,而是人. 我们 ...
- JS——预解析
1.排查语法错误 <script> console.log(1; </script> 2.变量提升和函数整体提升 <script> console.log(n1); ...
- SQL基本操作——JOIN多表联查
基本概念 join :用于根据两个或多个表中的列之间的关系,从这些表中查询数据. join和key:有时为了得到完整的结果,我们需要从两个或更多的表中获取结果.我们就需要执行 join.数据库中的表可 ...
- 顺序表查找及其优化（Java）
顺序表查找(线性查找): private static void Ordersearch(int[] arr,int num) { for (int i = 0; i < arr.length; ...