如何结合自己本地数据库，使用【百度地图】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& ...

随机推荐

记录一写Android常用API
Location.getLatitude() 纬度 Location.getLongitude() 经度获取运行应用包名顶层交互 TOP包名主Activity //获取当前系统中正在运行的 ...
mysql大表myisam的导入
在my.cnf中增大以下参数 myisam_sort_buffer_size = 1024Mtmp_table_size = 256M tmpdir = /home/tmpmyisam_max_sor ...
mysql 创建索引和删除索引
索引的创建可以在CREATE TABLE语句中进行,也可以单独用CREATE INDEX或ALTER TABLE来给表增加索引.删除索引可以利用ALTER TABLE或DROP INDEX语句来实现. ...
mysql_索引原理及优化
思考: 我们知道mysql最好的数据存储量级是百万级别,是的往往在百万级别或者几十万级别就会出现慢查询(我对慢查询的定义是大于1秒),几年前我所在的一个做pos机支付的联机交易的核心系统组,当时就做过 ...
C# 构造post参数一种看起来直观点的方法[转]
因为本人经常爱用C#做一些爬虫类的小东西,每次构造post参数的时候,都是直接字符串拼接的方式的,有时候改起来不太方便. 场景: 需要post一个地址参数列表 : username:管理员 pass ...
django--主要部分
django URL URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL模式以及要为该URL模式调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个U ...
jvm性能监控与故障处理工具
jdk为我们提供了一系列的jvm性能监控和故障处理工具,在这里根据学习进度进行整理记录.便于之后查阅 1.jps 虚拟机进程工具类似于Linux系统中的ps命令,用于查看虚拟机进程,常用的有以下功 ...
LeetCode Nested List Weight Sum
原题链接在这里:https://leetcode.com/problems/nested-list-weight-sum/ 题目: Given a nested list of integers, r ...
js 将json字符串转换为json对象的方法解析
推荐: var obj = eval('(' + str + ')'); var last=JSON.stringify(obj); //将JSON对象转化为string字符例如: JSON字符串: ...
js判断手指滑动方向（移动端）
var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Mat ...

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

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

随机推荐

热门专题