如何利用【百度地图API】,制作房产酒店地图?(中)——使用右侧列表打开信息窗口

简介: 原文:如何利用【百度地图API】,制作房产酒店地图?(中)——使用右侧列表打开信息窗口摘要: 很多房产网、旅游酒店网上,都有一个列表,鼠标经过列表上的数据时,地图上就会打开相应的信息窗口。 如何实现这一功能呢? 快来学习吧。
原文: 如何利用【百度地图API】,制作房产酒店地图?(中)——使用右侧列表打开信息窗口

摘要:

很多房产网、旅游酒店网上,都有一个列表,鼠标经过列表上的数据时,地图上就会打开相应的信息窗口。

如何实现这一功能呢?

快来学习吧。

-----------------------------------------------------------------------------------------------

一、制作列表

接着上一篇文章来讲,我们已经拥有了一张能显示自定义标注,和信息窗口的地图了。现在,我们来加上列表。

首先,需要写上一段htm,来展示列表。

<div style="float:left;width:200px;height:340px;border:1px solid gray;border-width:1px 1px 1px 0;padding:0 10px 0 0;line-height:1.8em;">
<ul>
<li><span style="float:right;">120元</span><a href="#">如家快捷酒店</a></li>
<li><span style="float:right;">2370元</span><a href="#">昆仑大厦</a></li>
<li><span style="float:right;">50元</span><a href="#">华夏银行</a></li>
<li><span style="float:right;">16元</span><a href="#">成都小吃</a></li>
<li><span style="float:right;">300元</span><a href="#">锦绣大饭店</a></li>
<li><span style="float:right;">180元</span><a href="#">七天快捷酒店</a></li>
<li><span style="float:right;">9元</span><a href="#">中央民族大学</a></li>
<li><span style="float:right;">3300元</span><a href="#">昌平汽车专修学院</a></li>
<li><span style="float:right;">20元</span><a href="#">百度大厦</a></li>
<li><span style="float:right;">1000元</span><a href="#">海尔电器销售点</a></li>
</ul>
</div>

  

对了,不要忘记给列表中的链接加上样式。

二、打开对应的信息窗口

因为这里没有用到对应的marker,不能用上一篇文章中的打开信息窗口的方法了。

我们需要在地图上打开信息窗口

需要两个参数,第一是信息窗口的id,第二是信息窗口的坐标。如下:

function openMyWin(id,p){
map.openInfoWindow(id,p);
}

  

最后,只需要对列表中的数据,加上打开对应信息窗口的js语句即可。

如下,当鼠标滑过时,打开信息一的窗口。

onmouseover="openMyWin(infoWindow1,point[1])"

  

三、截图

四、源代码

为了方便大家学习,以下代码包含了上一章的全部代码,并做了改进。

全部源代码如下:

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif View Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>酷讯酒店地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style type="text/css">
a
{text-decoration:none;color:#6ce;font-size:14px;}
a:hover
{text-decoration:underline;}
</style>
</head>
<body>
<div style="float:left;width:520px;height:340px;border:1px solid gray" id="container"></div>
<div style="float:left;width:200px;height:340px;border:1px solid gray;border-width:1px 1px 1px 0;padding:0 10px 0 0;line-height:1.8em;">
<ul>
<li><span style="float:right;">120元</span><a onmouseover="openMyWin(infoWindow1,point[1])" href="#">如家快捷酒店</a></li>
<li><span style="float:right;">2370元</span><a onmouseover="openMyWin(infoWindow2,point[2])" href="#">昆仑大厦</a></li>
<li><span style="float:right;">50元</span><a onmouseover="openMyWin(infoWindow3,point[3])" href="#">华夏银行</a></li>
<li><span style="float:right;">16元</span><a onmouseover="openMyWin(infoWindow4,point[4])" href="#">成都小吃</a></li>
<li><span style="float:right;">300元</span><a onmouseover="openMyWin(infoWindow5,point[5])" href="#">锦绣大饭店</a></li>
<li><span style="float:right;">180元</span><a onmouseover="openMyWin(infoWindow6,point[6])" href="#">七天快捷酒店</a></li>
<li><span style="float:right;">9元</span><a onmouseover="openMyWin(infoWindow7,point[7])" href="#">中央民族大学</a></li>
<li><span style="float:right;">3300元</span><a onmouseover="openMyWin(infoWindow8,point[8])" href="#">昌平汽车专修学院</a></li>
<li><span style="float:right;">20元</span><a onmouseover="openMyWin(infoWindow9,point[9])" href="#">百度大厦</a></li>
<li><span style="float:right;">1000元</span><a onmouseover="openMyWin(infoWindow0,point[0])" href="#">海尔电器销售点</a></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point,
14);

var myIcon = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/examples/images/Mario.png", new BMap.Size(32, 70), { //小车图片
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});

var point = [new BMap.Point(116.411776,39.942833),new BMap.Point(116.320791,40.003682),new BMap.Point(116.275186,39.896095),new BMap.Point(116.425098,39.946249),new BMap.Point(116.359823,39.984761),new BMap.Point(116.316479,39.98323),new BMap.Point(116.385986,39.946124),new BMap.Point(116.427545,40.00796),new BMap.Point(116.446965,39.911603),new BMap.Point(116.454579,39.946652)]; //10个坐标点

var marker1 = new BMap.Marker(point[1],{icon:myIcon}); // 创建10个标注
var marker2 = new BMap.Marker(point[2],{icon:myIcon});
var marker3 = new BMap.Marker(point[3],{icon:myIcon});
var marker4 = new BMap.Marker(point[4],{icon:myIcon});
var marker5 = new BMap.Marker(point[5],{icon:myIcon});
var marker6 = new BMap.Marker(point[6],{icon:myIcon});
var marker7 = new BMap.Marker(point[7],{icon:myIcon});
var marker8 = new BMap.Marker(point[8],{icon:myIcon});
var marker9 = new BMap.Marker(point[9],{icon:myIcon});
var marker0 = new BMap.Marker(point[0],{icon:myIcon});

map.addOverlay(marker1);
// 将标注添加到地图中
map.addOverlay(marker2);
map.addOverlay(marker3);
map.addOverlay(marker4);
map.addOverlay(marker5);
map.addOverlay(marker6);
map.addOverlay(marker7);
map.addOverlay(marker8);
map.addOverlay(marker9);
map.addOverlay(marker0);

map.setViewport(point);
//调整地图的最佳视野为显示标注数组point

var opts1 = {offset : new BMap.Size(0, -25), title : '<span style="font-size:14px;color:#0A8021">如家快捷酒店</span>'};
var opts2 = {offset : new BMap.Size(0, -25), title : '<span style="font-size:14px;color:#0A8021">昆仑大厦</span>'};
var opts3 = {offset : new BMap.Size(0, -25), title : '<span style="font-size:14px;color:#0A8021">华夏银行</span>'};
var opts4 = {offset : new BMap.Size(0, -25), title : '<span style="font-size:14px;color:#0A8021">成都小吃</span>'};
var opts5 = {offset : new BMap.Size(0, -25), title : '<span style="font-size:14px;color:#0A8021">锦绣大饭店</span>'};
var opts6 = {offset : new BMap.Size(0, -25), title : '<span style="font-size:14px;color:#0A8021">七天快捷酒店</span>'};
var opts7 = {offset : new BMap.Size(0, -25), title : '<span style="font-size:14px;color:#0A8021">中央民族大学</span>'};
var opts8 = {offset : new BMap.Size(0, -25), title : '<span style="font-size:14px;color:#0A8021">昌平汽车专修学院</span>'};
var opts9 = {offset : new BMap.Size(0, -25), title : '<span style="font-size:14px;color:#0A8021">百度大厦</span>'};
var opts0 = {offset : new BMap.Size(0, -25), title : '<span style="font-size:14px;color:#0A8021">海尔电器销售点</span>'};

var infoWindow1 = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑:</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts1); // 创建信息窗口对象,引号里可以书写任意的html语句。
var infoWindow2 = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市海淀区紫竹院123号</br><b>电话:</b>010-59921010</br><b>口碑:</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts2);
var infoWindow3 = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市海淀区紫竹院123号</br><b>电话:</b>010-59921010</br><b>口碑:</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts3);
var infoWindow4 = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市海淀区紫竹院123号</br><b>电话:</b>010-59921010</br><b>口碑:</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts4);
var infoWindow5 = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑:</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts5);
var infoWindow6 = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市大钟寺沧澜大厦</br><b>电话:</b>010-59921010</br><b>口碑:</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts6);
var infoWindow7 = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑:</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts7);
var infoWindow8 = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市哇哈哈路鲜鱼一条街</br><b>电话:</b>010-59921010</br><b>口碑:</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts8);
var infoWindow9 = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑:</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts9);
var infoWindow0 = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑:</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts0);

marker1.addEventListener(
"mouseover", function(){this.openInfoWindow(infoWindow1);});
marker2.addEventListener(
"mouseover", function(){this.openInfoWindow(infoWindow2);});
marker3.addEventListener(
"mouseover", function(){this.openInfoWindow(infoWindow3);});
marker4.addEventListener(
"mouseover", function(){this.openInfoWindow(infoWindow4);});
marker5.addEventListener(
"mouseover", function(){this.openInfoWindow(infoWindow5);});
marker6.addEventListener(
"mouseover", function(){this.openInfoWindow(infoWindow6);});
marker7.addEventListener(
"mouseover", function(){this.openInfoWindow(infoWindow7);});
marker8.addEventListener(
"mouseover", function(){this.openInfoWindow(infoWindow8);});
marker9.addEventListener(
"mouseover", function(){this.openInfoWindow(infoWindow9);});
marker0.addEventListener(
"mouseover", function(){this.openInfoWindow(infoWindow0);});

function openMyWin(id,p){
map.openInfoWindow(id,p);
}
</script>

  

目录
相关文章
|
2月前
|
Linux API 数据安全/隐私保护
【Linux 用户管理】Linux用户身份信息获取与管理API 接口
【Linux 用户管理】Linux用户身份信息获取与管理API 接口
38 0
|
2月前
|
弹性计算 JSON Shell
基于Web API的自动化信息收集和整理
【4月更文挑战第30天】
41 0
|
25天前
|
Java API Maven
使用Java Libvirt API 访问虚拟机信息
使用Java Libvirt API 访问虚拟机信息
15 1
|
5天前
|
运维 Kubernetes API
阿里云云效操作报错合集之API返回的错误信息,错误码为"Operate.NoPermission",该如何解决
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
21天前
|
API 开发工具 开发者
如何通过 1688 商品详情的 API 接口获取商品的详细信息
在数字化商业环境中,利用1688 API获取商品详情对企业和开发者至关重要。步骤包括:1) 成为1688开发者并注册;2) 申请API权限,选择合适的接口;3) 深入理解API文档;4) 配置开发环境;5) 发送GET请求,例如使用Python的`requests`库;6) 处理响应数据并进行错误处理。确保遵循文档,精确编程,以获取有价值的商品信息。遇到问题时,参考API文档或寻求技术支持。
|
21天前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
27 0
|
25天前
|
SQL DataWorks 监控
DataWorks操作报错合集之在调用数据服务API时返回的错误码是"ODPS-0410051",并且错误信息提示"Invalid credentials - accessKeyId not found",该怎么办
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
16 0
|
25天前
|
域名解析 JavaScript 网络协议
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
39 0
|
1月前
|
JavaScript 前端开发 Java
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
|
2月前
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解