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项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...
随机推荐
- IDEA Spark Streaming Kafka数据源-Producer
import java.util import org.apache.kafka.clients.producer.{KafkaProducer, ProducerConfig, ProducerRe ...
- PCB 钻孔补偿那点事
没有优秀的个人,只有优秀的团队,在团队共同的协作下,PCB CAM自动化[net处理]与[钻孔处理] 第一阶段开发项完成了,,后续工作可以转向PCB规则引擎开发了.这里说说PCB工程钻孔补偿的那点事, ...
- vue-video-player视频播放插件
安装依赖 npm install vue-video-player -S 引入配置 //main.js import 'video.js/dist/video-js.css' import 'vue- ...
- 高德，百度，Google地图定位偏移以及坐标系转换
一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系 一般用国际GPS纪录仪记录下来的经纬度,通过GPS定位拿到的原始经纬度,Google和高德地图定位的的 ...
- $CF1141B Maximal Continuous Rest$
告诉你一天n件事情 a[i]为1是休息 a[i]为2是工作 求最长连续的休息时间(即最长的1 可以作为环状来求.(即环状最长的1 这题就可以用前缀和贪心等什么操作.. 然后用\(ans1ans2\)瞎 ...
- JavaScript--编程挑战
小伙伴们,请编写"改变颜色"."改变宽高"."隐藏内容"."显示内容"."取消设置"的函数,点击相应 ...
- CSS-类和ID选择器的区别
学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1.ID选择器只能在文档中使用一 ...
- ORA-01012:not logged on的解决办法
conn / as sysdba 报错ORA-01012: not logged on 发生原因:关闭数据库是shutdown 后面没有接关闭参数中的任何一个. nomal ————- —-所有连接都 ...
- SQL Sever语言 存储过程及触发器
存储过程:就像函数一样的会保存在数据库中-->可编程性-->存储过程 创建存储过程: 保存在数据库表,可编程性,存储过程create proc jiafa --需要的参数@a int,@b ...
- [ USACO 2007 OPEN ] Dining
\(\\\) \(Description\) 有\(N\)头牛,\(F\)种食物,\(D\)种饮料,每种食物和饮料只有一份. 现在已知每头牛可以吃哪些食物,可以喝哪些饮料,问最多可以让多少头牛可以同时 ...