备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

如何利用【百度地图API】，制作房产酒店地图？（上）——制作自定义标注和自定义信息窗口

2015-01-07 1356
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:如何利用【百度地图API】，制作房产酒店地图？（上）——制作自定义标注和自定义信息窗口摘要： 　　想亲手制作一张酷讯、去哪儿、安居客、链接地产那样的房产、酒店地图麼？那赶快来学习吧。（以酷讯为例，如下图） 　　   更多成功案例请点击：http://dev.
原文: 如何利用【百度地图API】，制作房产酒店地图？（上）——制作自定义标注和自定义信息窗口

摘要：

　　想亲手制作一张酷讯、去哪儿、安居客、链接地产那样的房产、酒店地图麼？那赶快来学习吧。（以酷讯为例，如下图）

　　

 

更多成功案例请点击：http://dev.baidu.com/wiki/map/index.php?title=%E6%88%90%E5%8A%9F%E6%A1%88%E4%BE%8B

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

准备知识：

0、如何创建一张百度地图？   最简单地图的示例：http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&0_0#0&0

1、如何找到百度坐标？    坐标拾取工具:http://dev.baidu.com/wiki/static/map/API/tool/getPoint/ 

2、如何制作自定义覆盖物？  自定义覆盖物示例：http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&3_12#3&12 

3、如果填写信息窗口内容？   信息窗口支持html语句：http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&4_2#4&2

4、如何打开信息窗口？    方法：openInfoWindow

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

教学开始~

 

0、如何创建百度地图？

打开记事本，拷贝以下代码，并把文件保存为htm格式。比如map.htm。然后双击图标运行。点击这里运行。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>百度地图的Hello, World</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map =new BMap.Map("container");            // 创建Map实例
var pp =new BMap.Point(116.404, 39.915);    // 创建点坐标
map.centerAndZoom(pp,15);                     // 初始化地图,设置中心点坐标和地图级别。
</script>

　　

 

1、如何找到百度坐标？

利用百度提供的坐标拾取工具（网址：http://dev.baidu.com/wiki/static/map/API/tool/getPoint/）获取10个坐标点。

如下图，我输入“酒店”，在右侧会出现一些酒店的经纬度。也可直接在地图上点击，获取经纬度！

 

 

这样，我获取了10个经纬度，并把它们保存到一个数组里。我把获取的坐标全部罗列出来。

var points = [//10个坐标点
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)];

　　

利用这些点创建标注，并且打到地图上。为了让大家看得清楚，这里就不使用循环了。如下：

var marker1 =new BMap.Marker(points[1]);  // 创建10个标注
var marker2 =new BMap.Marker(points[2]);
var marker3 =new BMap.Marker(points[3]);
var marker4 =new BMap.Marker(points[4]);
var marker5 =new BMap.Marker(points[5]);
var marker6 =new BMap.Marker(points[6]);
var marker7 =new BMap.Marker(points[7]);
var marker8 =new BMap.Marker(points[8]);
var marker9 =new BMap.Marker(points[9]);
var marker10 =new BMap.Marker(points[0]);

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(marker10);

　　

 

这里，一定要记得，如何给地图添加了标注，又没有调整到合适的地图视野，那些标注是看不见的。需要调整视野。

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

　　

2、自定义覆盖物

如果你不满意标注图标，可以自己选择1）改变icon，或者2）自定义覆盖物。

1）改变icon

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

var carMk = new BMap.Marker(points[0],{icon:myIcon});  //创建标注
map.addOverlay(carMk);    //添加marker到地图上

　　

2）自定义覆盖物的示例：http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&3_12#3&12

 

到现在为止，你的地图会显示成这个样子。记得第一个标注麼？它已经被你设置成超级马里奥了！！

 

3、信息窗口内容

信息窗口里支持任意的htm代码。你可以这样来创建一个信息窗口。记住，要先定义opts，再定义信息窗口。简单的代码如下：

var opts = {
  width : 250,     // 信息窗口宽度
  height: 100,     // 信息窗口高度
  title : "Hello"// 信息窗口标题
}
var infoWindow =new BMap.InfoWindow("World", opts);  // 创建信息窗口对象

 

复杂信息窗口的内容这样写，如下：

var opts1 = {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语句。

 

4、打开信息窗口

给标注添加鼠标事件，当鼠标滑过标注的时候，打开信息窗口。

marker.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow);});

　　

所以，到现在为止，你的地图应该呈现这样一幅景象。

 

 

 

本案例全部代码如下：

<!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>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></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), {    //小车图片
    offset: new BMap.Size(0, -5),    //相当于CSS精灵
    imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
  });

var points = [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(points[1],{icon:myIcon});  // 创建10个标注
var marker2 =new BMap.Marker(points[2],{icon:myIcon});
var marker3 =new BMap.Marker(points[3],{icon:myIcon});
var marker4 =new BMap.Marker(points[4],{icon:myIcon});
var marker5 =new BMap.Marker(points[5],{icon:myIcon});
var marker6 =new BMap.Marker(points[6],{icon:myIcon});
var marker7 =new BMap.Marker(points[7],{icon:myIcon});
var marker8 =new BMap.Marker(points[8],{icon:myIcon});
var marker9 =new BMap.Marker(points[9],{icon:myIcon});
var marker0 =new BMap.Marker(points[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(points);         //调整地图的最佳视野为显示标注数组point

var opts1 = {title : '<span style="font-size:14px;color:#0A8021">如家快捷酒店</span>'};
var opts2 = {title : '<span style="font-size:14px;color:#0A8021">昆仑大厦</span>'};
var opts3 = {title : '<span style="font-size:14px;color:#0A8021">华夏银行</span>'};
var opts4 = {title : '<span style="font-size:14px;color:#0A8021">成都小吃</span>'};
var opts5 = {title : '<span style="font-size:14px;color:#0A8021">锦绣大饭店</span>'};
var opts6 = {title : '<span style="font-size:14px;color:#0A8021">七天快捷酒店</span>'};
var opts7 = {title : '<span style="font-size:14px;color:#0A8021">中央民族大学</span>'};
var opts8 = {title : '<span style="font-size:14px;color:#0A8021">昌平汽车专修学院</span>'};
var opts9 = {title : '<span style="font-size:14px;color:#0A8021">百度大厦</span>'};
var opts0 = {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);});

</script>

　　

 

 

 

 

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

附加内容：

如何制作酷讯右边的列表？（今天太晚了，明天早上我过来接着写。）

文章标签：
API
定位技术
前端开发
JavaScript
容器
关键词：
API信息
API自定义
百度地图API
百度API
API百度地图
杰克.陈
目录
相关文章
傻啦嘿哟
|
1月前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
傻啦嘿哟
90 0
蓝易云
|
3月前
|
Linux
百度搜索：蓝易云【Linux】查看系统各种信息的常用命令 （CPU、内存、进程、网口、磁盘、硬件、等等）】
上命令能快速获取系统的CPU、内存、进程、网口、磁盘、硬件等信息
蓝易云
242 6
傻啦嘿哟
|
1月前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
傻啦嘿哟
52 0
前端技术栈
|
3月前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
前端技术栈
145 0
Vue中使用echarts@4.x中国地图及AMap相关API的使用
蓝易云
|
3月前
|
Linux
百度搜索：蓝易云【Linux系统中查看硬盘信息的方法有哪些？】
这些是在Linux系统中查看硬盘信息的常见方法。根据您的需求和具体环境，您可以选择适合您的方法来查看硬盘信息。
蓝易云
78 0
蓝易云
|
3月前
|
缓存 Linux
百度搜索：蓝易云【Linux系统中查看CPU信息的方法有哪些？】
这些是在Linux系统中查看CPU信息的常见方法。根据您的需求和具体环境，您可以选择适合您的方法来查看CPU信息。
蓝易云
58 0
蓝易云
|
3月前
|
缓存 Linux
百度搜索：蓝易云【Linux系统中查看内存信息的方法有哪些？】
这些是在Linux系统中查看内存信息的常见方法。根据您的需求和具体环境，您可以选择适合您的方法来查看内存信息。
蓝易云
78 0
小周sir
|
4月前
|
SQL 存储 DataWorks
DataWorks中API、desc、数据地图，这3个怎么对起来？
DataWorks中API、desc、数据地图，这3个怎么对起来？
小周sir
40 0
蓝易云
|
4月前
|
Linux
百度搜索：蓝易云【Linux系统下获取系统、BIOS、进程、网络等相关信息的方法和工具。】
综上所述，通过使用命令行工具和图形化工具，可以在Linux系统下获取系统、BIOS、进程和网络等相关信息。根据具体的需求和使用场景，选择合适的工具和命令可以帮助你更好地了解和管理Linux系统。
蓝易云
65 2
蓝易云
|
2月前
|
存储 Kubernetes 容器
百度搜索：蓝易云【Kubernetes使用helm部署NFS Provisioner】
现在，你已经成功使用Helm部署了NFS Provisioner，并且可以在Kubernetes中创建使用NFS存储的PersistentVolumeClaim。
蓝易云
43 10

热门文章

最新文章

  • 1
    Google Gemini API 接口调用方法
  • 2
    【C/C++ 数据库 sqlite3】SQLite C语言API返回值深入解析
  • 3
    免费使用Kimi的API接口，kimi-free-api真香
  • 4
    Java 学习路线：基础知识、数据类型、条件语句、函数、循环、异常处理、数据结构、面向对象编程、包、文件和 API
  • 5
    产品经理必备知识——API接口
  • 6
    实战篇：商品API接口在跨平台销售中的有效运用与案例解析
  • 7
    探究如何在Linux系统中修改进程资源限制:四种方法调整进程限制，让你的系统高效运行(包含应用层getrlimit和setrlimit API)
  • 8
    阿里云微服务引擎及 API 网关 2024 年 3 月产品动态
  • 9
    利用Django框架构建高效后端API服务
  • 10
    Serverless 应用引擎常见问题之API生成的函数镜像改为自定义的镜像如何解决
  • 1
    vue整合kitymind百度脑图-引用打包文件方案
    26
  • 2
    百度后端笔试题知识点总结
    27
  • 3
    使用Python调用百度地图API实现地址查询
    90
  • 4
    Python加百度语音API实现文字转语音功能
    52
  • 5
    百度地图缩放级别与比例尺的关系
    68
  • 6
    长连接网关技术专题(十)：百度基于Go的千万级统一长连接服务架构实践
    74
  • 7
    夸克网盘的文件怎么保存到百度网盘？
    269
  • 8
    百度虚拟机 bcloud_nginx_user.conf配置
    22
  • 9
    百度虚拟机中的nginx
    14
  • 10
    实战练习：用airtest-selenium脚本爬取百度热搜标题
    22

    • 相关课程

    更多
  • 体验-K8S API 基础及Pod 基本应用
  • 相册服务中的故事生成算法介绍

    • 相关电子书

    更多
  • CUDA MATH API
  • API PLAYBOOK
  • 传统企业的“+互联网”-API服务在京东方的实践

    • 相关实验场景

    更多
  • 快速体验智能体API应用
  • 配置流程编排实现根据天气情况播放歌曲
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 基于Kibana Lens进行数据可视化，灵活分析航班信息
  • 基于Kibana Discover筛选数据，自由搜索航班信息
  • 【图生图】一键部署3D卡通风格模型
    • 下一篇
    阿里云oss简介和使用流程