如何利用【百度地图API】，制作房产酒店地图？（上）——制作自定义标注和自定义信息窗口...
2024-05-26 03:45:02
摘要：
想亲手制作一张酷讯、去哪儿、安居客、链接地产那样的房产、酒店地图麼？那赶快来学习吧。（以酷讯为例，如下图）
更多成功案例请点击：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>
-------------------------------------------------------------------------------------------------
附加内容：
如何制作酷讯右边的列表？（今天太晚了，明天早上我过来接着写。）
转载于:https://www.cnblogs.com/milkmap/archive/2011/08/04/2127663.html
如何利用【百度地图API】，制作房产酒店地图？（上）——制作自定义标注和自定义信息窗口...相关推荐
- 如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库...
摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章-- --------------------------------------------------------- 一.先按照前两篇 ...
- 利用百度地图API制作房产酒店地图
摘要: 想亲手制作一张酷讯.去哪儿.安居客.链接地产那样的房产.酒店地图麼?那赶快来学习吧.(以酷讯为例,如下图) 更多成功案例请点击:http://dev.baidu.com/wiki/map/in ...
- 【云图】如何制作东莞酒店地图？
原文:[云图]如何制作东莞酒店地图? 摘要:今天到深圳参加第二届电博会,果然不像车展或者漫展那样,会有萌妹纸,大家都好素净.晚上去东莞玩一圈,发现订不到酒店啊!各种商业中心关闭啊.于是想,那自己制作一 ...
- 从百度地图api到我的地图app
从百度地图api到我的地图app 1.了解百度地图api 获取AK(秘钥/百度地图api) 注册和获取秘钥中会遇到的问题: 在android studio上配置百度地图SDK [开发文档链接](htt ...
- 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文地址为: [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的 ...
- html标签怎么制作足迹地图,用百度地图API做个人足迹地图教程
上次折腾了个人百度足迹地图,积累了点经验,现分享给大家,如有兴趣都可以学着做一个.二话不说,先放出代码,点击下载. 压缩包含三个文件以及一个文件夹,其中"x1.php"是主题模板, ...
- 【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍
一.如何进行标注 1.首先,我们需要找准标注的位置.比如,我想标注"中央民族大学"附近的网球场.那么,我转到坐标拾取工具页面,请点击http://openapi.baidu.com ...
- 【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍...
摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. -------------------------------------------------- ...
- php 开发百度聚合,php利用百度javascript API实现导航
/** * 导航去门店 */ public function dpdh(){ // $userid = $this->init(); if ($_GET['id']) { $where['id' ...
- 【百度地图API】多家地图API内存消耗对比测验（带源码）
任务描述: 啊,美妙的春节结束了.酸奶小妹和妈妈的山西平遥之旅也宣告成功!距离平遥古城7km,有一个同样身为"世界文化遗产"的寺庙,叫做"双林寺".双林寺的精致 ...
最新文章
- R语言使用ggplot2可视化堆叠条形图，并在堆叠条形图上显示数据值实战
- 微软加入了面向Java的Cloud Foundry
- AGC 027D.Modulo Matrix(构造 黑白染色)
- Linux下配置服务器节点上的时区
- python物体跟着鼠标走_用Python写一个跟随鼠标运动的自定义窗口
- 获取当前日期是本年的第几周java与mysql获取值不一致
- 有多少是长大了以后才明白的道理？
- tf卡传输可执行程序至linux开发板
- 解决ubuntu下安装mysql使用service无法启动问题
- 09程序员的修炼之道阅读笔记之三
- 黑马day11 脏读数据amp;解
- 启用MySQL查询缓存
- Cell-type–specific || 单细胞文章新范式
- html form回调函数,js 中的submit 回调函数
- python爬虫设计图片大全_PYTHON爬虫——必应图片关键词爬取
- 计算机桌面的字有毛边,windows系统屏幕显示的字体发虚有锯齿
- div+css视频教程大全免费下载更有html5教程
- Battle接口测试训练系统的1分钟快速说明
- 微信扫码支付 支付模式二
- oracle 10 dbca第12步,第10步：DBCA创建实例