調取百度地圖接口，實現取本身的實時位置，而後能夠在百度地圖上添加信息標註

時間 2019-11-26

標籤百度地圖接口實現本身實時位置而後能夠添加信息標註简体版

原文原文鏈接

前幾天接了一個小項目，就是有關百度地圖的，和個人上一篇不同，上一篇是複製人家的源代碼是把東西寫死了的，此次的比較有難度，要調取他的接口，用js來實現。javascript

下面我先說一下主要實現的功能，和要實現的頁面php

這個小項目分爲前臺和後臺css

前臺須要兩個頁面，第一個頁面是一打開就能夠得到本身的實時位置，顯示當前位置與當前的經緯度，這兩項是自動獲取的，還有標題和電話是能夠本身添加的，點擊添加，就是到達百度地圖的頁面，你剛剛添加的東西就會在這個地圖上顯示，造成一個標註，點擊標註，裏面顯示的就是剛剛你添加的標題和電話。html

後臺就是顯示你添加的那些信息，也就是說你在添加的時候，就已經把他存入數據庫了，你能夠經過後臺來修改他的標題和電話，其餘兩項不可改，或是能夠直接刪除，刪除的話，地圖上的小標註也會消失。java

功能差很少就是這些，當時寫的時候，沒有具體的講清楚饒了不少彎路，當真正理清楚了反而以爲沒有那麼難了，不過確實也沒有學過，感受好多東西都是遇到了才邊學邊會作jquery

廢話很少說了，先來看一下效果吧sql

由於要手機也能夠用，因此作的響應式的數據庫

他的位置取到的是這裏bootstrap

這個定位很不許確，有時取到的位置是對的，有時候會有誤差api

下面再來給他添加標題和電話

點擊標註

會轉到百度地圖

點擊標識

會彈出剛纔咱們輸入的內容

看一下數據庫

剛纔添加的那條也進了數據庫

還有其餘兩個地點。咱們從地圖上找一下

另外兩個標在這裏，點擊標識

均可以出現裏面的內容

而後再來看後臺頁面

能夠對其進行修改，刪除

點擊修改

後面加了333，點擊修改

修改爲功

具體就是這麼一個操做

作的時候只須要參考一個網址就能夠http://lbsyun.baidu.com/index.php?title=jspopular&qq-pf-to=pcqq.c2c

這個網址是關於百度地圖操做的

進入後就是這樣的

調接口前首先要點擊獲取祕鑰,沒有登陸百度帳號的，首先會讓你登陸，登錄後會出現一個這樣的頁面

你能夠建立應用，內容能夠隨便填

建立了以後就會出現你建立好的應用

那個AK就是百度地圖接口的祕鑰

而後再打開一開始的窗口

功能介紹裏面的小功能隨便點進一個

而後就到達了這個頁面

能夠參考着這個來寫

作這個小項目須要一個數據庫，數據庫以下

下面展現一下個人源代碼把

前臺添加頁代碼部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的祕鑰"></script>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<title>無標題文檔</title>
</head>
<style type="text/css">
p{margin-left:5px; font-size:14px;}
#r1{ width:100%; max-width:1300px; height:500px; text-align:center; }
#r2{ width:100%; max-width:1300px; height:50px; text-align:center; }
#r3{ color:#999}
</style>
<body style="background-image:url(img/18I58PICdSi_1024.jpg); background-repeat:no-repeat; background-size:100% 600px">
<h2 id="r2">標註您當前位置，並添加信息</h2>
<div id="r1">
<form action="baidutj.php" method="post">
<div>地&nbsp; &nbsp;址：<input type="text" name="dizhi" id='di' /></div>
<div>經緯度：<input type="text" name="du" id="result_"/></div>
<div>標&nbsp; &nbsp;題：<input type="text" name="biao" /></div>
<div>電&nbsp; &nbsp;話：<input type="text" name="dian" /></div>
<br />
<div><input type="submit" value="標註" /></div>
</form>
<br />
<p id="r3">注：地址和經緯度取您的實時位置,標註後會顯示百度地圖</p>
</div>
<div id="allmap" style="display:none"></div>
</body>
<script type="text/javascript">
        
        
        
        


var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            
            //alert('您的位置：'+r.point.lng+','+r.point.lat);
            $("#result_").val(r.point.lng+','+r.point.lat);
            
            
    
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(r.point.lng,r.point.lat);
        map.centerAndZoom(point,12);
        var geoc = new BMap.Geocoder();    
    
        geoc.getLocation(point, function(rs){
            var addComp = rs.addressComponents;
            //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
            $("#di").val(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });            
        
        
            
        }
        else {
            alert('failed'+this.getStatus());
        }        
    },{enableHighAccuracy: true}) 


</script>    
</html>

這裏的思路是這樣的，先找到本身實時的經緯度，而後再根據經緯度轉換爲實時地址名

運行起來就是這樣的

可能要等一小會，纔會拾取到你的位置

而後再來寫添加的處理頁面

<?php
$dizhi=$_POST["dizhi"];
$du= $_POST["du"];
$biao = $_POST["biao"];
$dian = $_POST["dian"];
//造鏈接對象
$db = new MySQLi("localhost","root","726","ziyuan");


//寫SQL語句
$sql = "insert into ditu values('','{$dizhi}','{$du}','{$biao}','{$dian}')";
//執行
$r=$db->query($sql);
if($r)
{
    header("location:baiduditu1.php");
    
}
else
{
    echo "標註失敗！";
    
    }

就是普通的添加語句

再來看前臺的地圖部分

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
        #allmap{width:100%;height:500px; border:1px solid #000;}
        p{margin-left:5px; font-size:14px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的祕鑰"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <title>給多個點添加信息窗口</title>
</head>
<body background="img/4ef34db0af8b9c924670415e46ae6326.jpg">
<h2>地圖顯示</h2>
    <div id="allmap"></div>
    
</body>
</html>
<script type="text/javascript">
    // 百度地圖API功能    
    map = new BMap.Map("allmap");
    map.addControl(new BMap.NavigationControl());  //添加默認縮放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默認縮略地圖控件
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打開
    map.enableScrollWheelZoom(true);    //啓用滾輪放大縮小，默認禁用
    map.centerAndZoom(new BMap.Point(118.024491,36.812252), 15);
    var data_info = [
<?php    
$db = new MySQLi("localhost","root","726","ziyuan");
$sqla = "select jingwei,dizhi,biaoti,tem from ditu ";
$result = $db->query($sqla);
$attra=$result->fetch_all(); 
foreach($attra as $v)
{    
    
    
    
echo"    [{$v[0]},'地址：{$v[1]}<br/>標題：{$v[2]}<br/>電話：{$v[3]}'],
        
                    
    ";
}
?>
];
    var opts = {
                width : 350,     // 信息窗口寬度
                height: 100,     // 信息窗口高度
                title : "信息窗口" , // 信息窗口標題
                enableMessage:true//設置容許信息窗發送短息
               };
    for(var i=0;i<data_info.length;i++){
        var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 建立標註
        var content = data_info[i][2];
        map.addOverlay(marker);               // 將標註添加到地圖中
        addClickHandler(content,marker);
    }
    function addClickHandler(content,marker){
        marker.addEventListener("click",function(e){
            openInfo(content,e)}
        );
    }
    function openInfo(content,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content,opts);  // 建立信息窗口對象 
        map.openInfoWindow(infoWindow,point); //開啓信息窗口
    }
</script>

這裏的標註是根據有幾個位置就建立幾個，而後就是它的信息窗口

後臺代碼部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script src="bootstrap.min.js"></script>

<style type="text/css">
*{
    margin:0px auto; padding:0px
    
 }

.a1{
    color:#F00
    }
#q1{
    width:100%;
    text-align:center}
#q2{
    width:100%;
    text-align:center;
    color:#999
    }
</style>
<body style="background-image:url(img/8e3ff763a61b0fe2a9efaa3bfb3ba1c4.jpg); background-repeat:no-repeat; background-size:100% 500px">
<h1 id="q1" >地圖信息管理</h1>
<br />
<table width="80%" border="1" cellpadding="0" cellspacing="0">
<tr>
 <td>地址</td>
 <td>經緯度</td>
 <td>標題</td>
 <td>電話</td>
 <td>操做</td>
</tr>
<?php
$db = new MySQLi("localhost","root","726","ziyuan");
$sql = "select * from ditu";
$result = $db->query($sql);
$attr=$result->fetch_all();
foreach($attr as $v)
{
    
    echo "<tr><td>{$v[1]}</td><td>{$v[2]}</td><td>{$v[3]}</td><td>{$v[4]}</td><td><a href='baiduxg.php?id={$v[0]}'>修改</a>&nbsp;&nbsp;<a class='a1' href='baidusc.php?id={$v[0]}' onclick=\"return confirm('肯定刪除麼')\">刪除</a></td></tr>";
    
    
    }
?>


</table>
<br />
<p id="q2">注：可修改信息中的標題和電話<br />數據刪除後地圖的標識也會刪除</p>


</html>

這裏的操做就簡單一點了，刪改查

修改部分代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>

<body>
<h1>修改地圖信息</h1>
<?php
$id = $_GET["id"];
//造鏈接對象
$db = new MySQLi("localhost","root","726","ziyuan");
//寫SQL語句
$sql = "select * from ditu where id='{$id}'";
//執行
$result =$db->query($sql);
//取數據
$attr = $result->fetch_row();



?>
<form action="baiduxgcl.php" method="post">
   
<div>地 &nbsp;&nbsp;址：<input type="text" disabled="disabled" name="dizhi" value="<?php echo $attr[1] ?>"/></div>
<br />
<input type="hidden"  name="id" value="<?php echo $attr[0] ?>"/>

<div>標 &nbsp;&nbsp;題：<input type="text" name="biaoti" value="<?php echo $attr[3] ?>"/></div>
<br />
<div>電 &nbsp;&nbsp;話：<input type="text" name="tem" value="<?php echo $attr[4] ?>"/></div>
<br />
<div><input type="submit" value="修改" /></div>
</form>

</body>
</html>

修改處理代碼

<?php
$id = $_POST["id"];
$biaoti = $_POST["biaoti"];
$tem = $_POST["tem"];

//造鏈接對象
$db = new MySQLi("localhost","root","726","ziyuan");
//寫SQL語句
$sql = "update ditu set biaoti='{$biaoti}',tem='{$tem}' where id='{$id}'";
//執行
$r=$db->query($sql);
if($r)
{
    header("location:baiduht.php");
    }
else
{
    echo "修改失敗！";
    }

最後就是刪除部分代碼

<?php
$id= $_GET["id"];
//造鏈接對象
$db= new MySQLi("localhost","qishuang","qishuang","qishuang");
//寫SQL語句
$sql = "delete from ditu where id='{$id}'";
//執行
$r=$db->query($sql);
if($r)
{
    header("location:baiduht.php");
    }
else
{
    echo "刪除失敗！";
    }

這樣一整個就作完了

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

還有一種功能，就是輸入地址能夠讀出他的經緯度，而後從地圖上立馬找到

這個功能不跟你們細說了，下面我把源代碼寫下面

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>根據地址查詢經緯度</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body style="background:#CBE1FF">
    <div style="width:730px;margin:auto;">   
        要查詢的地址：<input id="text_" type="text" value="寧波天一廣場" style="margin-right:100px;"/>
        查詢結果(經緯度)：<input id="result_" type="text" />
        <input type="button" value="查詢" onclick="searchByStationName();"/>
        <div id="container" 
            style="position: absolute;
                margin-top:30px; 
                width: 730px; 
                height: 590px; 
                top: 50; 
                border: 1px solid gray;
                overflow:hidden;">
        </div>
    </div>
</body>
<script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom("寧波", 12);
    map.enableScrollWheelZoom();    //啓用滾輪放大縮小，默認禁用
    map.enableContinuousZoom();    //啓用地圖慣性拖拽，默認禁用

    map.addControl(new BMap.NavigationControl());  //添加默認縮放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默認縮略地圖控件
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打開

    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); //容許自動調節窗體大小
function searchByStationName() {
    map.clearOverlays();//清空原來的標註
    var keyword = document.getElementById("text_").value;
    localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0);
        document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
        map.centerAndZoom(poi.point, 13);
        var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 建立標註，爲要查詢的地方對應的經緯度
        map.addOverlay(marker);
        var content = document.getElementById("text_").value + "<br/><br/>經度：" + poi.point.lng + "<br/>緯度：" + poi.point.lat;
        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
        marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
        // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
    });
    localSearch.search(keyword);
} 
</script>
</html>

運行起來的話就是這種效果

好文要頂關注我收藏該文