摘要：应广大API爱好者要求，写了一篇利用自己数据库标点的文章……

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

一、先按照前两篇文章那样，做好静态文件。

请看两篇文章：

1、制作自定义标注和自定义信息窗口 http://www.cnblogs.com/milkmap/archive/2011/08/04/2127663.html

2、使用右侧列表打开信息窗口 http://www.cnblogs.com/milkmap/archive/2011/08/09/2132308.html

二、建立自己的数据库。

需要存入以下信息：经纬度、名称、地址、电话、价格等。

API爱好者们还可以添加其他数据，按照相同的办法储存和读取。

1. 创建数据表：y_map

SQL语句：

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，请用坐标拾取工具，拾取百度坐标：http://dev.baidu.com/wiki/static/map/API/tool/getPoint/

SQL语句：

INSERT INTO `y_map` (`id`, `point`, `title`, `address`, `price`, `tel`, `level`) VALUES(0, '116.411776,39.942833', '如家快捷酒店', '北京市朝阳区高碑店小学旁', 120, '010-59921010', 5),(1, '116.320791,40.003682', '昆仑大厦', '北京市海淀区紫竹院123号', 2370, '010-59921010', 4),(2, '116.275186,39.896095', '华夏银行', '北京市海淀区紫竹院123号', 50, '010-59921010', 4),(3, '116.425098,39.946249', '成都小吃', '北京市海淀区紫竹院123号', 16, '010-59921010', 4),(4, '116.359823,39.984761', '锦绣大饭店', '北京市朝阳区高碑店小学旁', 300, '010-59921010', 5),(5, '116.316479,39.98323', '七天快捷酒店', '北京市大钟寺沧澜大厦', 180, '010-59921010', 5),(6, '116.385986,39.946124', '中央民族大学', '北京市朝阳区高碑店小学旁', 9, '010-59921010', 3),(7, '116.427545,40.00796', '昌平汽车专修学院', '北京市哇哈哈路鲜鱼一条街', 3300, '010-59921010', 3),(8, '116.446965,39.911603', '百度大厦', '北京市朝阳区高碑店小学旁', 20, '010-59921010', 3),(9, '116.454579,39.946652', '海尔电器销售点', '北京市朝阳区高碑店小学旁', 1000, '010-59921010', 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 = '';$i = 0;while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {$img = '';echo '<li>                <span style="float:right;">'.$row["price"].'元</span>                <a οnmοuseοver="openMyWin(infoWindow'.$i.',point['.$i.'])" href="#">'.$row['title'].'</a>             </li>';

$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:14px;color:#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.8em;font-size:12px;'><b>地址:</b>".$row['address']."</br><b>电话:</b>010-59921010</br><b>口碑：</b>".$img."<a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>\", opts".$i.");";$addEventListener .= 'marker'.$i.'.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow'.$i.');});';$i++;    }$arr_point = substr($arr_point , 0 , -1).']';?>

　　

3、定义好信息后，需要把js用php语句拼起来。

拼接字符串时，注意要保持与静态文件里js的代码一致。

<?phpecho '<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/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><?php

/**     *  连接数据库*/

$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 = '';$i = 0;while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {$img = '';echo '<li>                <span style="float:right;">'.$row["price"].'元</span>                <a οnmοuseοver="openMyWin(infoWindow'.$i.',point['.$i.'])" href="#">'.$row['title'].'</a>             </li>';

$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:14px;color:#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.8em;font-size:12px;'><b>地址:</b>".$row['address']."</br><b>电话:</b>010-59921010</br><b>口碑：</b>".$img."<a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>\", opts".$i.");";$addEventListener .= 'marker'.$i.'.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow'.$i.');});';$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>

<?phpecho '<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>

　　

转载于:https://www.cnblogs.com/milkmap/archive/2011/08/16/2135323.html

如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库...相关推荐

  1. 利用百度地图API制作房产酒店地图

    摘要: 想亲手制作一张酷讯.去哪儿.安居客.链接地产那样的房产.酒店地图麼?那赶快来学习吧.(以酷讯为例,如下图) 更多成功案例请点击:http://dev.baidu.com/wiki/map/in ...

  2. 使用百度地图API制作线路轨迹播放

    1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图 获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...

  3. 地图上制作线路的动画_使用百度地图API制作线路轨迹播放

    1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图 获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...

  4. 百度地图API制作类似 百度地图的路线导航界面并实现简单的路线规划功能

    之前我们讲了怎么在百度地图上设置Marker(如A点..) 和弹出框(跟随Marker的,Marker移动的时候也是会跟着移动的),接着又觉得百度地图自带的放大缩小不(fei)是(chang)很(de ...

  5. 技术图文：如何利用BigOne的API制作自动化交易系统 -- 订单系统

    背景 前面几天,我们一起封装了 BigONE 提供的"身份验证"与"资产账户"部分的 API. 如何利用BigOne的API制作自动化交易系统 – 身份验证 如 ...

  6. 【云图】如何制作东莞酒店地图？

    原文:[云图]如何制作东莞酒店地图? 摘要:今天到深圳参加第二届电博会,果然不像车展或者漫展那样,会有萌妹纸,大家都好素净.晚上去东莞玩一圈,发现订不到酒店啊!各种商业中心关闭啊.于是想,那自己制作一 ...

  7. 技术图文：如何利用BigOne的API制作自动化交易系统--网格交易法

    背景 前面,通过图文 如何利用 C# 爬取 ONE 的交易数据? 向大家介绍了如何爬取在 BigOne 上线的数字资产的交易数据. 其次,通过图文 如何利用BigOne的API制作自动化交易系统 – ...

  8. 技术图文：如何利用BigOne的API制作自动化交易系统 -- 获取账户资产

    背景 前几天我们介绍了如何使用 BigONE Developer API V2 来获取身份令牌的方法「如何利用BigOne的API制作自动化交易系统 – 身份验证」.一旦获取了身份令牌,我们就可以在网 ...

  9. python+百度翻译api制作中英文互转的代码应用实例

    本篇文章主要讲解,python+百度翻译api制作中英文互转的代码应用实例 作者:任聪聪 前提准备 1.python 3.9版本 2.注册百度翻译开发者 地址:https://fanyi-api.ba ...

最新文章

  1. 小米4公布会视频地址
  2. capistrano部署ruby on rails应用
  3. linux 下面编译FFMPEG
  4. java怎么获取固定的日期,如何获取一个指定时间的java.util.Date对象
  5. 批处理命令 / echo
  6. 树莓派+神经计算棒2实时人脸检测
  7. P4148 简单题（KDTree）
  8. waf可以检测哪个端口的流量_锐速云：CC防御过程中，WAF的主要特点有哪些？
  9. 面试 － 要不简单聊一下你对MySQL索引的理解？
  10. day15 java接口在开发中的作用
  11. 第 8 天 多线程与多进程
  12. Vue 2.x 实战之后台管理系统开发（二）
  13. CentOS下redis安装和部署
  14. 第四届中国优秀云计算开源案例评选结果出炉
  15. OSChina 周六乱弹 ——劳动节仍然在劳动，情人节却没有情人。
  16. 飞桨高阶使用教程：自定义CPU算子的实现和使用
  17. uniapp开发FFmpeg安卓原生短视频插件支持裁剪、添加背景音乐、压缩视频、视频播放器、拍照、录屏
  18. 一切还要从副总裁在朋友圈卖内裤说起
  19. Win11 封杀第三方浏览器工具，不用 Edge 就不行
  20. Xshell如何连接虚拟机

热门文章

  1. 小花梨的三角形（暴力上下扫三角形）
  2. thinkphp5 404 file_put_contents 无法打开流：权限被拒绝
  3. docker 部署 nginx+php+mysql
  4. 一堂课玩转rpm包的制作
  5. UIControl的子类UISwitch, UISegmentedCntrol, UIPageControl详解
  6. 确认对话框ConfirmDialog和选择对话框OptionDialog
  7. 使用MySQL自带工具mysqlhotcopy快速备份mysql数据库
  8. 树莓派中找不到/dev/video0的解决方案及RaspberryCam的使用
  9. 解决修改css或js文件，浏览器缓存更新问题。
  10. hadoop--Unable to load native-hadoop library for your platform解决方法