如何利用房产募集资金，制作房产酒店地图
点击联系发帖人
时间：2017-05-06 10:45
如何利用【百度地图API】，制作房产酒店地图？
编辑：www.fx114.net
本篇文章主要介绍了"如何利用【百度地图API】，制作房产酒店地图？"，主要涉及到如何利用【百度地图API】，制作房产酒店地图？方面的内容，对于如何利用【百度地图API】，制作房产酒店地图？感兴趣的同学可以参考一下。
摘要： 想亲手制作一张酷讯、去哪儿、安居客、链接地产那样的房产、酒店地图麼？那赶快来学习吧。（以酷讯为例，如下图）
更多成功案例请点击： ------------------------------------------------------------------------------------------------------------------------------ 准备知识： 0、如何创建一张百度地图？ & 最简单地图的示例： 1、如何找到百度坐标？ & &坐标拾取工具:& 2、如何制作自定义覆盖物？ &自定义覆盖物示例：& 3、如果填写信息窗口内容？ & 信息窗口支持html语句： 4、如何打开信息窗口？ & &方法：openInfoWindow ------------------------------------------------------------------------------------------------------------------------------ 教学开始~
0、如何创建百度地图？ 打开记事本，拷贝以下代码，并把文件保存为htm格式。比如map.htm。然后双击图标运行。。
&!DOCTYPE html&&html&&head&&meta http-equiv="Content-Type" content="text/ 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:520height:340border:1px solid gray" id="container"&&/div&&/body&&/html&&script type="text/javascript"&var map = new BMap.Map("container");
// 创建Map实例var point = new BMap.Point(116.404, 39.915);
// 创建点坐标map.centerAndZoom(point,15);
// 初始化地图,设置中心点坐标和地图级别。&/script&
1、如何找到百度坐标？ 利用百度提供的坐标拾取工具（网址：）获取10个坐标点。 如下图，我输入“酒店”，在右侧会出现一些酒店的经纬度。也可直接在地图上点击，获取经纬度！
这样，我获取了10个经纬度，并把它们保存到一个数组里。我把获取的坐标全部罗列出来。
var point = [ //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(point[1]);
// 创建10个标注var marker2 = new BMap.Marker(point[2]);var marker3 = new BMap.Marker(point[3]);var marker4 = new BMap.Marker(point[4]);var marker5 = new BMap.Marker(point[5]);var marker6 = new BMap.Marker(point[6]);var marker7 = new BMap.Marker(point[7]);var marker8 = new BMap.Marker(point[8]);var marker9 = new BMap.Marker(point[9]);var marker10 = new BMap.Marker(point[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(point);
//调整地图的最佳视野为显示标注数组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(point[0],{icon:myIcon});
//创建标注map.addOverlay(carMk);
//添加marker到地图上
2）自定义覆盖物的示例：
到现在为止，你的地图会显示成这个样子。记得第一个标注麼？它已经被你设置成超级马里奥了！！
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:14color:#0A8021"&如家快捷酒店&/span&'};var infoWindow1 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市朝阳区高碑店小学旁&/br&&b&电话:&/b&010-&/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: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/ charset=gb2312" /&&title&酷讯酒店地图&/title&&script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"&&/script&&/head&&body&&div style="width:520height:340border: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 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);
//调整地图的最佳视野为显示标注数组pointvar opts1 = {title : '&span style="font-size:14color:#0A8021"&如家快捷酒店&/span&'};var opts2 = {title : '&span style="font-size:14color:#0A8021"&昆仑大厦&/span&'};var opts3 = {title : '&span style="font-size:14color:#0A8021"&华夏银行&/span&'};var opts4 = {title : '&span style="font-size:14color:#0A8021"&成都小吃&/span&'};var opts5 = {title : '&span style="font-size:14color:#0A8021"&锦绣大饭店&/span&'};var opts6 = {title : '&span style="font-size:14color:#0A8021"&七天快捷酒店&/span&'};var opts7 = {title : '&span style="font-size:14color:#0A8021"&中央民族大学&/span&'};var opts8 = {title : '&span style="font-size:14color:#0A8021"&昌平汽车专修学院&/span&'};var opts9 = {title : '&span style="font-size:14color:#0A8021"&百度大厦&/span&'};var opts0 = {title : '&span style="font-size:14color:#0A8021"&海尔电器销售点&/span&'};var infoWindow1 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市朝阳区高碑店小学旁&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts1);
// 创建信息窗口对象，引号里可以书写任意的html语句。var infoWindow2 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市海淀区紫竹院123号&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts2);var infoWindow3 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市海淀区紫竹院123号&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts3);var infoWindow4 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市海淀区紫竹院123号&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts4);var infoWindow5 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市朝阳区高碑店小学旁&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts5);var infoWindow6 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市大钟寺沧澜大厦&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts6);var infoWindow7 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市朝阳区高碑店小学旁&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts7);var infoWindow8 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市哇哈哈路鲜鱼一条街&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts8);var infoWindow9 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市朝阳区高碑店小学旁&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts9);var infoWindow0 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市朝阳区高碑店小学旁&/br&&b&电话:&/b&010-&/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: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&
------------------------------------------------------------------------------------------------- 附加内容： 如何制作酷讯右边的列表？（今天太晚了，明天早上我过来接着写。）
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)下次自动登录
现在的位置:
& 综合 & 正文
百度地图高级实例1-如何利用【百度地图API】，制作房产酒店地图？（中）
很多房产网、旅游酒店网上，都有一个列表，鼠标经过列表上的数据时，地图上就会打开相应的信息窗口。
如何实现这一功能呢？
快来学习吧。
-----------------------------------------------------------------------------------------------
一、制作列表
接着上一篇文章来讲，我们已经拥有了一张能显示自定义标注，和信息窗口的地图了。现在，我们来加上列表。
首先，需要写上一段htm，来展示列表。
&div style="float:width:200height:340border:1border-width:1px 1px 1px 0;padding:0 10px 0 0;line-height:1.8"&&ul&&li&&span style="float:"&120元&/span&&a href="#"&如家快捷酒店&/a&&/li&&li&&span style="float:"&2370元&/span&&a href="#"&昆仑大厦&/a&&/li&&li&&span style="float:"&50元&/span&&a href="#"&华夏银行&/a&&/li&&li&&span style="float:"&16元&/span&&a href="#"&成都小吃&/a&&/li&&li&&span style="float:"&300元&/span&&a href="#"&锦绣大饭店&/a&&/li&&li&&span style="float:"&180元&/span&&a href="#"&七天快捷酒店&/a&&/li&&li&&span style="float:"&9元&/span&&a href="#"&中央民族大学&/a&&/li&&li&&span style="float:"&3300元&/span&&a href="#"&昌平汽车专修学院&/a&&/li&&li&&span style="float:"&20元&/span&&a href="#"&百度大厦&/a&&/li&&li&&span style="float:"&1000元&/span&&a href="#"&海尔电器销售点&/a&&/li&&/ul&&/<span style="margin-top:0 margin-right:0 margin-bottom:0 margin-left:0 padding-top:0 padding-right:0 padding-bottom:0 paddi
【上篇】【下篇】摘要：应广大API爱好者要求，写了一篇利用自己数据库标点的文章&&
---------------------------------------------------------
一、先按照前两篇文章那样，做好静态文件。
请看两篇文章：
二、建立自己的数据库。
需要存入以下信息：经纬度、名称、地址、电话、价格等。
API爱好者们还可以添加其他数据，按照相同的办法储存和读取。
1.&创建数据表：y_map
CREATE TABLE IF NOT EXISTS `y_map` (
`id` int(11) NOT NULL,
`point` varchar(128) NOT NULL,
`title` varchar(128) NOT NULL,
`address` varchar(128) NOT NULL,
`price` float NOT NULL,
`tel` varchar(20) NOT NULL,
`level` int(11) NOT NULL,
PRIMARY KEY
(`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;
来看一下创建好的数据库。
2.&插入数据
这里我插入了十条自己的数据。名称地址电话价格，我还放了评价。用level来表示。level为5，评价就有5颗星。
id是顺序插入的。
point，请用坐标拾取工具，拾取百度坐标：
INSERT INTO `y_map` (`id`, `point`, `title`, `address`, `price`, `tel`, `level`) VALUES(0, '116..942833', '如家快捷酒店', '北京市朝阳区高碑店小学旁', 120, '010-', 5),(1, '116..003682', '昆仑大厦', '北京市海淀区紫竹院123号', 2370, '010-', 4),(2, '116..896095', '华夏银行', '北京市海淀区紫竹院123号', 50, '010-', 4),(3, '116..946249', '成都小吃', '北京市海淀区紫竹院123号', 16, '010-', 4),(4, '116..984761', '锦绣大饭店', '北京市朝阳区高碑店小学旁', 300, '010-', 5),(5, '116..98323', '七天快捷酒店', '北京市大钟寺沧澜大厦', 180, '010-', 5),(6, '116..946124', '中央民族大学', '北京市朝阳区高碑店小学旁', 9, '010-', 3),(7, '116..00796', '昌平汽车专修学院', '北京市哇哈哈路鲜鱼一条街', 3300, '010-', 3),(8, '116..911603', '百度大厦', '北京市朝阳区高碑店小学旁', 20, '010-', 3),(9, '116..946652', '海尔电器销售点', '北京市朝阳区高碑店小学旁', 1000, '010-', 3);
来看一下数据库的样子：
三、如何改HTM为PHP，并结合数据库？
1、数据库连接
连接数据库
$mysql_server_name="localhost";
// 数据库服务器名称
$mysql_username="root";
// 连接数据库用户名
$mysql_password="root";
// 连接数据库密码
$mysql_database="map";
// 数据库的名字
// 连接到数据库
$conn=mysql_connect($mysql_server_name, $mysql_username,$mysql_password)
or die("Could not connect: ".mysql_error());
// 从表中提取信息的sql语句
$strsql="select * from y_map";
// 执行sql查询
$result=mysql_db_query($mysql_database, $strsql, $conn);
2、如何获取查询结果？
在这里，定义了标注、图片、信息窗口内容，以及经纬度数组。
// 获取查询结果
$arr_point = '[';
$maker = '';
$ops = '';
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$img = '';
echo '&li&
&span style="float:"&'.$row["price"].'元&/span&
&a onmouseover="openMyWin(infoWindow'.$i.',point['.$i.'])" href="#"&'.$row['title'].'&/a&
$arr_point .= 'new BMap.Point('.$row["point"].'),';
$maker .= 'var marker'.$i.' = new BMap.Marker(point['.$i.'],{icon:myIcon});';
$addverlay .= 'map.addOverlay(marker'.$i.');';
$ops .= 'var opts'.$i.' = {offset : new BMap.Size(0, -25), title : \'&span style="font-size:14color:#0A8021"&'.$row['title'].'&/span&\'};';
for($m = 0;$m & $row["level"];$m++)
$img .= "&img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /&";
$infoWindow .= "var infoWindow".$i." = new BMap.InfoWindow(\"&div style='line-height:1.8font-size:12'&&b&地址:&/b&".$row['address']."&/br&&b&电话:&/b&010-&/br&&b&口碑：&/b&".$img."&a style='text-decoration:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&\", opts".$i.");";
$addEventListener .= 'marker'.$i.'.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow'.$i.');});';
$arr_point = substr($arr_point , 0 , -1).']';
3、定义好信息后，需要把js用php语句拼起来。
拼接字符串时，注意要保持与静态文件里js的代码一致。
echo '&script& var point = '.$arr_point.';
echo $maker;
// 创建标注
echo $addverlay;
// 将标注添加到地图中
echo 'map.setViewport(point); ';
// 调整地图的最佳视野为显示标注数组point
echo $ops ;
echo $infoWindow ;
echo $addEventListener.' &/script& '?&
这样，就可以自动循环，从自己的数据库里，读取数据了。
信息窗口内容，也是自己定义的。
四、全部源代码
&!DOCTYPE html&&html&&head&&meta http-equiv="Content-Type" content="text/ 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:color:#6font-size:14}a:hover{text-decoration:}&/style&&/head&&body&&div style="float:width:520height:340border:1px solid gray" id="container"&&/div&&div style="float:width:200height:340border:1border-width:1px 1px 1px 0;padding:0 10px 0 0;line-height:1.8"&
连接数据库
$mysql_server_name="localhost";
// 数据库服务器名称
$mysql_username="root";
// 连接数据库用户名
$mysql_password="root";
// 连接数据库密码
$mysql_database="map";
// 数据库的名字
// 连接到数据库
$conn=mysql_connect($mysql_server_name, $mysql_username,$mysql_password)
or die("Could not connect: ".mysql_error());
// 从表中提取信息的sql语句
$strsql="select * from y_map";
// 执行sql查询
$result=mysql_db_query($mysql_database, $strsql, $conn);
// 获取查询结果
$arr_point = '[';
$maker = '';
$ops = '';
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$img = '';
echo '&li&
&span style="float:"&'.$row["price"].'元&/span&
&a onmouseover="openMyWin(infoWindow'.$i.',point['.$i.'])" href="#"&'.$row['title'].'&/a&
$arr_point .= 'new BMap.Point('.$row["point"].'),';
$maker .= 'var marker'.$i.' = new BMap.Marker(point['.$i.'],{icon:myIcon});';
$addverlay .= 'map.addOverlay(marker'.$i.');';
$ops .= 'var opts'.$i.' = {offset : new BMap.Size(0, -25), title : \'&span style="font-size:14color:#0A8021"&'.$row['title'].'&/span&\'};';
for($m = 0;$m & $row["level"];$m++)
$img .= "&img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /&";
$infoWindow .= "var infoWindow".$i." = new BMap.InfoWindow(\"&div style='line-height:1.8font-size:12'&&b&地址:&/b&".$row['address']."&/br&&b&电话:&/b&010-&/br&&b&口碑：&/b&".$img."&a style='text-decoration:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&\", opts".$i.");";
$addEventListener .= 'marker'.$i.'.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow'.$i.');});';
$arr_point = substr($arr_point , 0 , -1).']';
&/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)
//图片的偏移量。为了是图片底部中心对准坐标点。
});&/script&&?php
echo '&script& var point = '.$arr_point.';
echo $maker;
// 创建标注
echo $addverlay;
// 将标注添加到地图中
echo 'map.setViewport(point); ';
// 调整地图的最佳视野为显示标注数组point
echo $ops ;
echo $infoWindow ;
echo $addEventListener.' &/script& '?&
&script&function openMyWin(id,p){
map.openInfoWindow(id,p);
}&/script&
阅读(...) 评论()}
编辑：www.fx114.net
本篇文章主要介绍了"如何利用【百度地图API】，制作房产酒店地图？"，主要涉及到如何利用【百度地图API】，制作房产酒店地图？方面的内容，对于如何利用【百度地图API】，制作房产酒店地图？感兴趣的同学可以参考一下。
摘要： 想亲手制作一张酷讯、去哪儿、安居客、链接地产那样的房产、酒店地图麼？那赶快来学习吧。（以酷讯为例，如下图）
更多成功案例请点击： ------------------------------------------------------------------------------------------------------------------------------ 准备知识： 0、如何创建一张百度地图？ & 最简单地图的示例： 1、如何找到百度坐标？ & &坐标拾取工具:& 2、如何制作自定义覆盖物？ &自定义覆盖物示例：& 3、如果填写信息窗口内容？ & 信息窗口支持html语句： 4、如何打开信息窗口？ & &方法：openInfoWindow ------------------------------------------------------------------------------------------------------------------------------ 教学开始~
0、如何创建百度地图？ 打开记事本，拷贝以下代码，并把文件保存为htm格式。比如map.htm。然后双击图标运行。。
&!DOCTYPE html&&html&&head&&meta http-equiv="Content-Type" content="text/ 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:520height:340border:1px solid gray" id="container"&&/div&&/body&&/html&&script type="text/javascript"&var map = new BMap.Map("container");
// 创建Map实例var point = new BMap.Point(116.404, 39.915);
// 创建点坐标map.centerAndZoom(point,15);
// 初始化地图,设置中心点坐标和地图级别。&/script&
1、如何找到百度坐标？ 利用百度提供的坐标拾取工具（网址：）获取10个坐标点。 如下图，我输入“酒店”，在右侧会出现一些酒店的经纬度。也可直接在地图上点击，获取经纬度！
这样，我获取了10个经纬度，并把它们保存到一个数组里。我把获取的坐标全部罗列出来。
var point = [ //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(point[1]);
// 创建10个标注var marker2 = new BMap.Marker(point[2]);var marker3 = new BMap.Marker(point[3]);var marker4 = new BMap.Marker(point[4]);var marker5 = new BMap.Marker(point[5]);var marker6 = new BMap.Marker(point[6]);var marker7 = new BMap.Marker(point[7]);var marker8 = new BMap.Marker(point[8]);var marker9 = new BMap.Marker(point[9]);var marker10 = new BMap.Marker(point[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(point);
//调整地图的最佳视野为显示标注数组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(point[0],{icon:myIcon});
//创建标注map.addOverlay(carMk);
//添加marker到地图上
2）自定义覆盖物的示例：
到现在为止，你的地图会显示成这个样子。记得第一个标注麼？它已经被你设置成超级马里奥了！！
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:14color:#0A8021"&如家快捷酒店&/span&'};var infoWindow1 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市朝阳区高碑店小学旁&/br&&b&电话:&/b&010-&/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: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/ charset=gb2312" /&&title&酷讯酒店地图&/title&&script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"&&/script&&/head&&body&&div style="width:520height:340border: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 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);
//调整地图的最佳视野为显示标注数组pointvar opts1 = {title : '&span style="font-size:14color:#0A8021"&如家快捷酒店&/span&'};var opts2 = {title : '&span style="font-size:14color:#0A8021"&昆仑大厦&/span&'};var opts3 = {title : '&span style="font-size:14color:#0A8021"&华夏银行&/span&'};var opts4 = {title : '&span style="font-size:14color:#0A8021"&成都小吃&/span&'};var opts5 = {title : '&span style="font-size:14color:#0A8021"&锦绣大饭店&/span&'};var opts6 = {title : '&span style="font-size:14color:#0A8021"&七天快捷酒店&/span&'};var opts7 = {title : '&span style="font-size:14color:#0A8021"&中央民族大学&/span&'};var opts8 = {title : '&span style="font-size:14color:#0A8021"&昌平汽车专修学院&/span&'};var opts9 = {title : '&span style="font-size:14color:#0A8021"&百度大厦&/span&'};var opts0 = {title : '&span style="font-size:14color:#0A8021"&海尔电器销售点&/span&'};var infoWindow1 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市朝阳区高碑店小学旁&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts1);
// 创建信息窗口对象，引号里可以书写任意的html语句。var infoWindow2 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市海淀区紫竹院123号&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts2);var infoWindow3 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市海淀区紫竹院123号&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts3);var infoWindow4 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市海淀区紫竹院123号&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts4);var infoWindow5 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市朝阳区高碑店小学旁&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts5);var infoWindow6 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市大钟寺沧澜大厦&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts6);var infoWindow7 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市朝阳区高碑店小学旁&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts7);var infoWindow8 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市哇哈哈路鲜鱼一条街&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts8);var infoWindow9 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市朝阳区高碑店小学旁&/br&&b&电话:&/b&010-&/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:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&", opts9);var infoWindow0 = new BMap.InfoWindow("&div style='line-height:1.8font-size:12'&&b&地址:&/b&北京市朝阳区高碑店小学旁&/br&&b&电话:&/b&010-&/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: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&
------------------------------------------------------------------------------------------------- 附加内容： 如何制作酷讯右边的列表？（今天太晚了，明天早上我过来接着写。）
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)下次自动登录
现在的位置:
& 综合 & 正文
百度地图高级实例1-如何利用【百度地图API】，制作房产酒店地图？（中）
很多房产网、旅游酒店网上，都有一个列表，鼠标经过列表上的数据时，地图上就会打开相应的信息窗口。
如何实现这一功能呢？
快来学习吧。
-----------------------------------------------------------------------------------------------
一、制作列表
接着上一篇文章来讲，我们已经拥有了一张能显示自定义标注，和信息窗口的地图了。现在，我们来加上列表。
首先，需要写上一段htm，来展示列表。
&div style="float:width:200height:340border:1border-width:1px 1px 1px 0;padding:0 10px 0 0;line-height:1.8"&&ul&&li&&span style="float:"&120元&/span&&a href="#"&如家快捷酒店&/a&&/li&&li&&span style="float:"&2370元&/span&&a href="#"&昆仑大厦&/a&&/li&&li&&span style="float:"&50元&/span&&a href="#"&华夏银行&/a&&/li&&li&&span style="float:"&16元&/span&&a href="#"&成都小吃&/a&&/li&&li&&span style="float:"&300元&/span&&a href="#"&锦绣大饭店&/a&&/li&&li&&span style="float:"&180元&/span&&a href="#"&七天快捷酒店&/a&&/li&&li&&span style="float:"&9元&/span&&a href="#"&中央民族大学&/a&&/li&&li&&span style="float:"&3300元&/span&&a href="#"&昌平汽车专修学院&/a&&/li&&li&&span style="float:"&20元&/span&&a href="#"&百度大厦&/a&&/li&&li&&span style="float:"&1000元&/span&&a href="#"&海尔电器销售点&/a&&/li&&/ul&&/<span style="margin-top:0 margin-right:0 margin-bottom:0 margin-left:0 padding-top:0 padding-right:0 padding-bottom:0 paddi
【上篇】【下篇】摘要：应广大API爱好者要求，写了一篇利用自己数据库标点的文章&&
---------------------------------------------------------
一、先按照前两篇文章那样，做好静态文件。
请看两篇文章：
二、建立自己的数据库。
需要存入以下信息：经纬度、名称、地址、电话、价格等。
API爱好者们还可以添加其他数据，按照相同的办法储存和读取。
1.&创建数据表：y_map
CREATE TABLE IF NOT EXISTS `y_map` (
`id` int(11) NOT NULL,
`point` varchar(128) NOT NULL,
`title` varchar(128) NOT NULL,
`address` varchar(128) NOT NULL,
`price` float NOT NULL,
`tel` varchar(20) NOT NULL,
`level` int(11) NOT NULL,
PRIMARY KEY
(`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;
来看一下创建好的数据库。
2.&插入数据
这里我插入了十条自己的数据。名称地址电话价格，我还放了评价。用level来表示。level为5，评价就有5颗星。
id是顺序插入的。
point，请用坐标拾取工具，拾取百度坐标：
INSERT INTO `y_map` (`id`, `point`, `title`, `address`, `price`, `tel`, `level`) VALUES(0, '116..942833', '如家快捷酒店', '北京市朝阳区高碑店小学旁', 120, '010-', 5),(1, '116..003682', '昆仑大厦', '北京市海淀区紫竹院123号', 2370, '010-', 4),(2, '116..896095', '华夏银行', '北京市海淀区紫竹院123号', 50, '010-', 4),(3, '116..946249', '成都小吃', '北京市海淀区紫竹院123号', 16, '010-', 4),(4, '116..984761', '锦绣大饭店', '北京市朝阳区高碑店小学旁', 300, '010-', 5),(5, '116..98323', '七天快捷酒店', '北京市大钟寺沧澜大厦', 180, '010-', 5),(6, '116..946124', '中央民族大学', '北京市朝阳区高碑店小学旁', 9, '010-', 3),(7, '116..00796', '昌平汽车专修学院', '北京市哇哈哈路鲜鱼一条街', 3300, '010-', 3),(8, '116..911603', '百度大厦', '北京市朝阳区高碑店小学旁', 20, '010-', 3),(9, '116..946652', '海尔电器销售点', '北京市朝阳区高碑店小学旁', 1000, '010-', 3);
来看一下数据库的样子：
三、如何改HTM为PHP，并结合数据库？
1、数据库连接
连接数据库
$mysql_server_name="localhost";
// 数据库服务器名称
$mysql_username="root";
// 连接数据库用户名
$mysql_password="root";
// 连接数据库密码
$mysql_database="map";
// 数据库的名字
// 连接到数据库
$conn=mysql_connect($mysql_server_name, $mysql_username,$mysql_password)
or die("Could not connect: ".mysql_error());
// 从表中提取信息的sql语句
$strsql="select * from y_map";
// 执行sql查询
$result=mysql_db_query($mysql_database, $strsql, $conn);
2、如何获取查询结果？
在这里，定义了标注、图片、信息窗口内容，以及经纬度数组。
// 获取查询结果
$arr_point = '[';
$maker = '';
$ops = '';
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$img = '';
echo '&li&
&span style="float:"&'.$row["price"].'元&/span&
&a onmouseover="openMyWin(infoWindow'.$i.',point['.$i.'])" href="#"&'.$row['title'].'&/a&
$arr_point .= 'new BMap.Point('.$row["point"].'),';
$maker .= 'var marker'.$i.' = new BMap.Marker(point['.$i.'],{icon:myIcon});';
$addverlay .= 'map.addOverlay(marker'.$i.');';
$ops .= 'var opts'.$i.' = {offset : new BMap.Size(0, -25), title : \'&span style="font-size:14color:#0A8021"&'.$row['title'].'&/span&\'};';
for($m = 0;$m & $row["level"];$m++)
$img .= "&img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /&";
$infoWindow .= "var infoWindow".$i." = new BMap.InfoWindow(\"&div style='line-height:1.8font-size:12'&&b&地址:&/b&".$row['address']."&/br&&b&电话:&/b&010-&/br&&b&口碑：&/b&".$img."&a style='text-decoration:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&\", opts".$i.");";
$addEventListener .= 'marker'.$i.'.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow'.$i.');});';
$arr_point = substr($arr_point , 0 , -1).']';
3、定义好信息后，需要把js用php语句拼起来。
拼接字符串时，注意要保持与静态文件里js的代码一致。
echo '&script& var point = '.$arr_point.';
echo $maker;
// 创建标注
echo $addverlay;
// 将标注添加到地图中
echo 'map.setViewport(point); ';
// 调整地图的最佳视野为显示标注数组point
echo $ops ;
echo $infoWindow ;
echo $addEventListener.' &/script& '?&
这样，就可以自动循环，从自己的数据库里，读取数据了。
信息窗口内容，也是自己定义的。
四、全部源代码
&!DOCTYPE html&&html&&head&&meta http-equiv="Content-Type" content="text/ 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:color:#6font-size:14}a:hover{text-decoration:}&/style&&/head&&body&&div style="float:width:520height:340border:1px solid gray" id="container"&&/div&&div style="float:width:200height:340border:1border-width:1px 1px 1px 0;padding:0 10px 0 0;line-height:1.8"&
连接数据库
$mysql_server_name="localhost";
// 数据库服务器名称
$mysql_username="root";
// 连接数据库用户名
$mysql_password="root";
// 连接数据库密码
$mysql_database="map";
// 数据库的名字
// 连接到数据库
$conn=mysql_connect($mysql_server_name, $mysql_username,$mysql_password)
or die("Could not connect: ".mysql_error());
// 从表中提取信息的sql语句
$strsql="select * from y_map";
// 执行sql查询
$result=mysql_db_query($mysql_database, $strsql, $conn);
// 获取查询结果
$arr_point = '[';
$maker = '';
$ops = '';
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$img = '';
echo '&li&
&span style="float:"&'.$row["price"].'元&/span&
&a onmouseover="openMyWin(infoWindow'.$i.',point['.$i.'])" href="#"&'.$row['title'].'&/a&
$arr_point .= 'new BMap.Point('.$row["point"].'),';
$maker .= 'var marker'.$i.' = new BMap.Marker(point['.$i.'],{icon:myIcon});';
$addverlay .= 'map.addOverlay(marker'.$i.');';
$ops .= 'var opts'.$i.' = {offset : new BMap.Size(0, -25), title : \'&span style="font-size:14color:#0A8021"&'.$row['title'].'&/span&\'};';
for($m = 0;$m & $row["level"];$m++)
$img .= "&img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /&";
$infoWindow .= "var infoWindow".$i." = new BMap.InfoWindow(\"&div style='line-height:1.8font-size:12'&&b&地址:&/b&".$row['address']."&/br&&b&电话:&/b&010-&/br&&b&口碑：&/b&".$img."&a style='text-decoration:color:#2679BA;float:right' href='#'&详情&&&/a&&/div&\", opts".$i.");";
$addEventListener .= 'marker'.$i.'.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow'.$i.');});';
$arr_point = substr($arr_point , 0 , -1).']';
&/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)
//图片的偏移量。为了是图片底部中心对准坐标点。
});&/script&&?php
echo '&script& var point = '.$arr_point.';
echo $maker;
// 创建标注
echo $addverlay;
// 将标注添加到地图中
echo 'map.setViewport(point); ';
// 调整地图的最佳视野为显示标注数组point
echo $ops ;
echo $infoWindow ;
echo $addEventListener.' &/script& '?&
&script&function openMyWin(id,p){
map.openInfoWindow(id,p);
}&/script&
阅读(...) 评论()}
我要回帖
更多关于 利用房产销售员之便不交房款 的文章
更多推荐
- ·莒县四中老师名录第四中学领导班子
- ·海南国兴中学录取分数线郭学灿是海南国兴中学录取分数线初二第一名吗？
- ·公司里的产品投资总监是什么级别和主管，哪个级别更高一些？
- ·德国AEG公司官方网站aeg中国总代理代理联系方式？
- ·请问如何绕过输入界面进入绕过管理员权限安装软件模式?
- ·想了解正规足疗手法视频讲解方面的手法于解说，请专业人士赐教谢谢
- ·薇缇薇是传销吗（VTV）微商好做吗
- ·千米电商云 靠谱吗云
- ·平安福退保现金价值表是不是不太好，如果退保，如何减少损失
- ·aldermore bank这中国银行bank code是在伦敦对把？aldermore是不是新西兰的地名？
- ·专业第三方理财机构构排名靠谱吗知道的来说下吧。
- ·我1986年属虎男感情方面面现在挺纠结的，我女朋友是个女强人，经济收入比较丰厚，平
- ·中国中煤能源集团是上海能源的控股股东吗.
- ·政府牵头办的砖厂属于城镇集体所有制属于法人吗企业吗
- ·我用手机号码注册了微店，没有微店买东西有保障吗，也没有建筑小店，没有添加地址，没有绑定银行卡支付宝
- ·求可以普通人能贷款吗的人
- ·公安机关如何完善转移支付资金管理办法分配动态调整机制，应考虑哪些因素
- ·渝北重庆湖山花园园9栋是什么时间修建的产权多少年
- ·2017大蒜批发价格是多少
- ·如何利用房产募集资金，制作房产酒店地图
- ·p2p投资理财哪家不错有没有知道的呢？
- ·求大神指教，逝魔套值不魔法封印转圣物值得吗投资，还是继续刷
- ·我的卡没有支付宝卡卡转账收费吗过卡上怎么回事
- ·高新区公司营业执照可否转入成都天府新区和高新区
- ·新丰县的房价上涨幅度还会再涨麽？
- ·追尾后，定损价格与维修价格和维修要注意什么
- ·王者荣耀18888谁最强英雄实力排个名？？谢谢啦
- ·求王者荣耀qq版人物貂蝉貂蝉老版封面图
- ·英雄联盟网页制作什么时候7.8
- ·steam的steam游戏环境境包还能重新安装么
- ·求皇室战争恶搞每个卡牌编辑卡牌的软件，谢谢！
- ·为啥觉得天刀副本输出排行2017一直打酱油，没输出
- ·哪个ipad无限金币游戏软件能有游币送
- ·大秦娱乐——游戏中魔兽争霸魔法抗性性怎么计算减免的伤害，还有护甲
- ·王者荣耀套路打法，对面路那，我用什么打他？1V1
