如何结合自己本地数据库，使用【百度地图】API

如何结合自己本地数据库，使用【百度地图】API

百度地图使用越来越多，官网上的示例数据都是写死的，实际上我们的开发中的数据都是从数据库中取出来的，最近看了很多大神的文章，结合自己本地数据库使用百度地图API，这里来总结一下具体的代码。
本示例中，实现了将数据库里的位置信息显示在地图中，还实现了基本的搜索功能。

这里需要用到：请将这些库提前准备好放到文件中
jquery.min.js
与后台交互：Ajax 技术
另外用到：MySQL+PHP (没有基础也没事，后面附有)
注意使用前先到官网申请秘钥

1.创建数据库，SQL语句：
    create database map CHARSET=utf8;
    use map;
2.创建表格，SQL语句：
CREATE TABLE IF NOT EXISTS `myMap` (
    `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;

可以利用百度地图提供的坐标拾捡工具：http://api.map.baidu.com/lbsapi/getpoint/
获取坐标。
3.插入数据：
这里我们准备了10条自己的数据，id是按顺序插入的

SQL语句：
    INSERT INTO `myMap` (`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);

4.css/app.css代码为：

 *{

     padding:;

     margin:;

   }

   #container {

     float:left;

     width:800px;

     height:500px;

     border:1px solid gray;

     display: block;

   }

   .search_box {

     position: relative;

     width: 500px;

     float: right;

   }

   #search{

       border: 1px solid #ccc;

       width:220px;

       height:25px;

       text-indent:3px;

   }

   .search_results {

     border: 1px solid #ccc;

     height: auto;

     max-height: 200px;

     overflow-y: scroll;

     width: 220px;

     position: relative;

     display: none;

   }

   .search_results > li {

       color: #333;

       font-size: 14px;

       height: 30px;

       line-height: 30px;

       list-style: outside none none;

       text-indent: 10px;

   }

   .search_results > li:hover {

     background: #f2f2f2;

   }

   .search_results a {

       text-decoration: none;

       color: #333;

   }

5.连接数据库，查询数据，config/conn.php代码为：
    <?
        // 连接到数据库
        $conn = new mysqli("localhost", "root","","map")
                or die("Could not connect: ".mysql_error());
        mysqli_query($conn,"set names 'utf8'");
    ?>

6. header.php 的代码为：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <link rel="stylesheet" type="text/css" href="css/app.css">

     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=piXQ5CgHFqEefqCVbhhBFfe6HjF7l4zW"></script>

     <!-- 控制区域显示js -->

     <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

 </head>

 <body>

7. 获取查询结果，对获取结果进行处理，这里1.创建坐标，2.创建标注，3.将标注添加到地图中，4.自定义窗口信息，5.创建窗口对象，6.为创建的标注绑定mouseover事件。
index.php 的代码为：

 <? include ('header.php') ?>

       <div id="container"></div>

       <div class="search_box">

           <form method="post">

               <div>输入搜索的内容:</div><input type="text" id="search" name="topic" autocomplete="off" placeholder="请输入序号，地址，或名称查询">

           </form>

           <ul class="search_results"></ul>

       </div>

       <? include ('config/conn.php') ?>

       <?php

         $strsql="select * from myMap" ;

         $result = $conn->query($strsql);

         // 获取查询结果

         $arr_point = '[';

         $maker = '';

           $addverlay='';

         $ops = '';

           $infoWindow='';

           $addEventListener='';

         $i = 0;

         // $addverlay = ''; //修改php.ini的error_reporting = E_ALL为error_reporting = E_ALL & ~E_NOTICE

         while ($row = $result->fetch_assoc()) {

           $img = '';

               //1.从数据库中获取坐标，创建地图上的坐标点，并把它放到数组里

           $arr_point .= 'new BMap.Point('.$row["point"].'),';

               //2.利用这些坐标点创建标注mark1-mark9,将标注都存放到变量$mark中

           $maker .= 'var marker'.$i.' = new BMap.Marker(point['.$i.']);';

               //3.将标注添加到地图中

           $addverlay .= 'map.addOverlay(marker'.$i.');';

               for($m = 0;$m < $row["level"];$m++){

             $img .= "<img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' />";

           }

               //4.信息窗口的标题，记住，要先定义opts，再定义信息窗口

           $ops .= 'var opts'.$i.' = {title : \'<span style="font-size:14px;color:#0A8021">'.$row['title'].'</span>\'};';

               //5.创建信息窗口对象，信息窗口接收两个参数，第一个并指信息窗口的内容，第二个指上面定义的opts. 信息窗口里支持任意的htm代码

           $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.");";

               //6.给每一个标注添加mouseover事件

           $addEventListener .= 'marker'.$i.'.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow'.$i.');});';

           $i++;

         }

         $arr_point .= substr($arr_point , 0 , -1).']]';

       ?>

       <script type="text/javascript">

           var map = new BMap.Map("container");    // 创建Map实例

           var point = new BMap.Point(116.404, 39.915);    //创建中心点坐标

           map.centerAndZoom(point, 14);    //初始化地图,设置中心点坐标和地图级别

           function openMyWin(id,p){

               map.openInfoWindow(id,p);

           }

       </script>

       <!-- 定义好信息后，需要把js用php语句拼起来 -->

       <?php

           echo '<script> var point = '.$arr_point.';';    //坐标点

           echo $maker;                                   //创建标注

           echo $addverlay;                             //将标注添加到地图中

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

           echo $ops;

           echo $infoWindow ;

           echo $addEventListener.' </script> '

       ?>

       <script type="text/javascript" src="js/jquery.2.1.1.min.js"></script>

           <!-- 文本框搜索交互代码 -->

       <script type="text/javascript" src="js/index.js"></script>

     </body>

     </html>

8.下面是文本框的搜索：
编写的ajax交互代码放到 js/index.js里面，代码如下：

 $(function(){

       $('#search').val('');

       $(window).click(function(event) {

         $('.search_results').css('display','none');

       });

       $('#search, .search_results li').click(function(e) {

         e.stopPropagation();

       });

       $('#search').keyup(function(event) {

         event.stopPropagation();

         $.ajax({

           url: 'config/search_action.php',

           type: 'post',

           data: $("form").serialize(),

           success: function(responseText,status,xhr){

             console.log(responseText);

             if (responseText != ''){

               $('.search_results').css('display','block');

               $('.search_results').html(responseText);

             } else {

               $('.search_results').html("<li>没有搜索到</li>");

             }

           }

         })

         .done(function() {

           console.log("success");

         })

         .fail(function() {

           console.log("error");

         })

         .always(function() {

           console.log("complete");

         });

         ;

       });

     });

9.请求的后台文件为config/search_action.php，代码为：

 <? include ('conn.php') ?>

 <?

     $subject = $_POST['topic'];

     if ($subject != ''){

         $search_sql = "select * from y_map where (id like '%" .$subject. "%') or (title like '%" .$subject. "%') or (address like '%" .$subject. "%') order by id,title,address";

         $search_result = mysqli_query($conn, $search_sql);

         while ($row = $search_result->fetch_assoc()) {

             echo '<li onmouseover="openMyWin(infoWindow'.$row["id"].',point['.$row["id"].'])" >

                             <a href="#">'.$row['title'].'</a>

                         </li>';

         }

     } else {

         echo "none result";

     }

 ?>

10.总结：
使用百度地图的基本步骤：
    1.创建地图实例：var map = new BMap.Map("container");
    2.创建中心点坐标：var point = new BMap.Point(116.404, 39.915);
    3.初始化地图,设置中心点坐标和地图级别：map.centerAndZoom(point, 14);
    5.获取坐标点：
        如： var points = [
              new BMap.Point(116.411776,39.942833),
              new BMap.Point(116.320791,40.003682)
            ];
    6.创建标注：
        如：var marker1 =new BMap.Marker(points[1]);
            var marker2 =new BMap.Marker(points[2]);
    7.将标注添加到地图中：
        如：map.addOverlay(marker1);
            map.addOverlay(marker2);
    8.调整地图的最佳视野为显示标注数组point：
        如：map.setViewport(points);

如何结合自己本地数据库，使用【百度地图】API的更多相关文章

如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库
原文:如何利用[百度地图API],制作房产酒店地图?(下)--结合自己的数据库摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章…… -------------------------- ...
【百度地图API】交你如何用百度地图搜索自己的数据！不需数据库！
原文:[百度地图API]交你如何用百度地图搜索自己的数据!不需数据库! 摘要: 我有一定的房产数据,还有银行数据.我想在百度地图上标注出来,并且能搜索到我这些数据. 可是百度的数据库上并没有我的数据. ...
scrapy爬虫框架调用百度地图api数据存入数据库
scrapy安装配置不在本文提及, 1.在开始爬取之前,必须创建一个新的Scrapy项目.进入自定义的项目目录中,运行下列命令 scrapy startproject mySpider 其中, my ...
吐槽贴：百度地图 api 封装的实用功能 [源码下载]
ZMap 类功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...
Winform实现用多线程、百度地图API解析某公司的物理地址
前言作为一个很挫的C#新手总喜欢自己写点儿不着边际的东西,本人是个新手加菜鸟,写B/S的,工作中,任务完成了,空闲下来,总想继续学点儿什么,由此触发了本篇文章了.个人一直认为,.NET中,C/S所要 ...
百度地图API的IP定位城市和浏览器定位（转）
百度地图API提供了Geolocation 和 LocalCity两个服务类. 这俩API可以分别供用户在JavaScript中进行定位和城市确认. 1 本质上,Geolocation这个类是使用了支 ...
百度地图api简单使用方法
百度地图API的使用方法百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...
百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]
相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...
***微信LBS地理位置开发+百度地图API(地理位置和坐标转换)
微信公众平台开发 - 获取用户地理位置本文介绍在微信公众平台上如何使用高级接口开发获取用户地理位置的功能. 一.获取用户地理位置接口开通了上报地理位置接口的公众号,用户在关注后进入公众号会话时,会 ...
百度地图API的使用方法
百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

随机推荐

Ubuntu使用ssh公钥实现免密码登录
ssh 无密码登录要使用公钥与私钥.linux下可以用用ssh-keygen生成公钥/私钥对,下面我以Ubuntu为例. 有机器A(10.0.2.1),B(10.0.2.100).现想A通过ssh免密 ...
经典的javascript函数实例，css的. #区别
先贴javascript经典例子代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
js获取当前时间戳不需毫秒数
var timestamp = Date.parse(new Date())/1000;
vs2015启动网站调试提示 HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容。解决方法
今天安装了vs2015 下载一个项目进行试用,启动调试的时候提示 HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容. 最可能的原因: 没有为请求的 URL ...
jquery的$().each,$.each的区别
在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法.两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点. $().each,对于这个方法,在d ...
Objective-C数据保存和读取
一.NSCoding协议中的Archiving和Unarchiving (1)Archiving一个object,会记录这个对象的所有的properties到filesystem: (2)Unarch ...
if语句中的判断条件(nginx)
if语句中的判断条件正则表达式匹配: ==:等值比较; ~:与指定正则表达式模式匹配时返回"真",判断匹配与否时区分字符大小写: ~*:与指定正则表达 ...
python图片添加水印（转载）
转载来自:http://blog.csdn.net/orangleliu/ # -*- encoding=utf-8 -*- ''''' author: orangleliu pil处理图片,验证,处 ...
[SharePoint 2013] Create event receiver for external list
Main list for creating event receiver for external list Subscribe storage, it could be data table ...
python Gunicorn
1. 简介 Gunicorn(Green Unicorn)是给Unix用的WSGI HTTP 服务器,它与不同的web框架是非常兼容的.易安装.轻.速度快. 2. 示例代码1 def app(envi ...

如何结合自己本地数据库，使用【百度地图】API

如何结合自己本地数据库，使用【百度地图】API的更多相关文章

随机推荐

热门专题