高德地图API——信息窗体InfoWindow

信息窗体包括InfoWindow和AdvancedInfoWindow两个类，InfoWindow可以实现默认信息窗体、自定义信息窗体，AdvancedInfoWindow是封装了周边搜索和三种路线规划的高级信息窗体。这篇文章只讲述InfoWindow。

信息窗体是什么呢？先来看一个最简单的案例

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>自定义样式信息窗体</title><link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><script type="text/javascript"src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">var map = new AMap.Map("container",{resizeEnable:true,center: [116.481181, 39.989792]//地图中心位置});var marker = new AMap.Marker({map:map,position: [116.481181, 39.989792]//点所在位置});//创建信息窗体var infoWindow = new AMap.InfoWindow({content:"aaa"//信息窗体的内容});//如果希望的是点击标记才 出现这个信息窗口，那把 下面的注释去掉即可
//  AMap.event.addListener(marker,'click',function(){ //监听点标记的点击事件infoWindow.open(map,marker.getPosition()); //信息窗体打开
//  });
</script></body>
</html>

信息窗体的关键在于content属性，主要使用content对此信息窗体设置其内容，content属性可以是一个String类型的值，如我上面所写的案例，也可以是一个html

把上面代码的26行换成如下代码：

content:"<div>信息窗体内容1</div><div>信息窗体内容2</div><div>信息窗体内容3</div>"//信息窗体的内容

效果将为：

现在内容是有了，不过边框及内容有些丑丑的，并且信息窗体的位置也是指在了marker点的底部所指的位置，我们应该把他调整一下

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>自定义样式信息窗体</title><link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><!--设置信息窗体的样式--><style type="text/css">.info {border: solid 1px silver;}div.info-top {position: relative;background: none repeat scroll 0 0 #F9F9F9;border-bottom: 1px solid #CCC;border-radius: 5px 5px 0 0;}div.info-top div {display: inline-block;color: #333333;font-size: 14px;font-weight: bold;line-height: 31px;padding: 0 10px;}div.info-top img {position: absolute;top: 10px;right: 10px;transition-duration: 0.25s;}div.info-top img:hover {box-shadow: 0px 0px 5px #000;}div.info-middle {font-size: 12px;padding: 6px;line-height: 20px;}div.info-bottom {height: 0px;width: 100%;clear: both;text-align: center;}div.info-bottom img {position: relative;z-index: 104;}span {margin-left: 5px;font-size: 11px;}.info-middle img {float: left;margin-right: 6px;}</style><script type="text/javascript"src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">var map = new AMap.Map("container",{resizeEnable:true,center: [116.481181, 39.989792]//地图中心位置});var marker = new AMap.Marker({map:map,position: [116.481181, 39.989792]//点所在位置});//实例化信息窗体//标题头var title = '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',content = [];   //内容content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");content.push("电话：010-64733333");content.push("<a href='http://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");//创建信息窗体var infoWindow = new AMap.InfoWindow({isCustom:true, //是否自定义信息窗体content: createInfoWindow(title, content.join("<br/>")), //调用创建信息窗体的方法--信息窗体的内容offset:new AMap.Pixel(16, -45) //偏移量});//如果希望的是点击标记才 出现这个信息窗口，那把 下面的注释去掉即可AMap.event.addListener(marker,'click',function(){ //监听点标记的点击事件infoWindow.open(map,marker.getPosition()); //信息窗体打开});//构建自定义信息窗体function createInfoWindow(title, content) {//info 为 信息窗体var info = document.createElement("div");info.className = "info";//可以通过下面的方式修改自定义窗体的宽高//info.style.width = "400px";// 定义顶部标题var top = document.createElement("div");var titleD = document.createElement("div");var closeX = document.createElement("img");top.className = "info-top";titleD.innerHTML = title;closeX.src = "http://webapi.amap.com/images/close2.gif";closeX.onclick = closeInfoWindow; //点击右上角的x可以关闭该信息窗体top.appendChild(titleD);top.appendChild(closeX);info.appendChild(top);   //信息窗体增加顶部的div// 定义中部内容var middle = document.createElement("div");middle.className = "info-middle";middle.style.backgroundColor = 'white';middle.innerHTML = content;info.appendChild(middle);  //信息窗体增加中部的div// 定义底部内容var bottom = document.createElement("div");bottom.className = "info-bottom";bottom.style.position = 'relative';bottom.style.top = '0px';bottom.style.margin = '0 auto';var sharp = document.createElement("img");sharp.src = "http://webapi.amap.com/images/sharp.png";bottom.appendChild(sharp);info.appendChild(bottom);  //信息窗体增加底部的divreturn info;}//关闭信息窗体function closeInfoWindow() {map.clearInfoWindow();}
</script></body>
</html>

高德地图API——信息窗体InfoWindow相关推荐

vue使用高德地图为信息窗体再添加点击事件
即使是用的vue,也不能使用@click为窗体添加点击事件,需要使用onclick,并且在定义了函数后,使用该函数还是会报函数未定义的错误,需要在window下添加该函数,点击时可以在原型链中找到该函 ...
【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文地址为: [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的 ...
高德地图 API，点击地图标记获取自定义标记 (Marker) 中的信息
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息通过高德地图 JS Web 添加自定义图标,自定义窗口标记已经能在地图中正常添加自定义标记了这篇文章讲讲点击标记时,如何 ...
uniapp+高德地图api 获取定位信息及详细地址
引入高德地图js api 高德地图api官方文档根据官方文档建议,我使用的是JSAPI Loader 并且是通过npm安装的 npm i @amap/amap-jsapi-loader --save ...
通过高德地图API实现浏览器定位[以及提高定位精度、获取详细位置信息]
目录一.前言: 二.正文: 1.注册高德地图开发者.创建应用 2.借助官方的示例开发 3.对官方的开发示例进行修改 4.获取详细位置信息 5.详细代码三.结尾:小周接触编程时间不长,刚起步,有更好 ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
项目 - Web地图开发【高德地图API】(一)
导航兔: Web地图开发 [高德地图API] 导航地址 Web地图开发[高德地图API](一) https://qianmoer.blog.csdn.net/article/details/12842 ...
Android 高德地图API（详细步骤+源码）
高德地图API使用详解前言正文一.创建应用 ① 获取PackageName ② 获取调试版安全码SHA1 ③ 获取发布版安全码SHA1 二.配置Android Studio工程 ① 导入SDK ...
高德地图API调用和标准（转）
看过高德地图API的同学都知道,高德地图不同端调用是不一样的,作为一个前端菜鸟,前一阵分别在pc端和移动端分别调用了高德地图.情况是这个样子的,PC端呢我们可以用高德API的web端的javascri ...

高德地图API——信息窗体InfoWindow

高德地图API——信息窗体InfoWindow相关推荐

最新文章

热门文章