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

最新推荐文章于 2020-06-12 22:04:27 发布

南华

最新推荐文章于 2020-06-12 22:04:27 发布

阅读量1.5k

点赞数 1

分类专栏：地图API

本文链接：https://blog.csdn.net/hewusheng10/article/details/16828507

版权

地图API 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

随笔- 85 文章- 0 评论- 626

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

摘要：应广大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语句：

CREATETABLEIFNOTEXISTS `y_map` (
  `id` int(11) NOTNULL,
  `point` varchar(128) NOTNULL,
  `title` varchar(128) NOTNULL,
  `address` varchar(128) NOTNULL,
  `price` floatNOTNULL,
  `tel` varchar(20) NOTNULL,
  `level` int(11) NOTNULL,
  PRIMARYKEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

来看一下创建好的数据库。

2. 插入数据

这里我插入了十条自己的数据。名称地址电话价格，我还放了评价。用level来表示。level为5，评价就有5颗星。

id是顺序插入的。

point，请用坐标拾取工具，拾取百度坐标：http://dev.baidu.com/wiki/static/map/API/tool/getPoint/

SQL语句：

INSERTINTO `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的代码一致。

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

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

南华

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录