前幾天接了一個(gè)小項(xiàng)目，就是有關(guān)百度地圖的，和我的上一篇不一樣，上一篇是復(fù)制人家的源代碼是把東西寫死了的，這次的比較有難度，要調(diào)取他的接口，用js來(lái)實(shí)現(xiàn)。
下面我先說(shuō)一下主要實(shí)現(xiàn)的功能，和要實(shí)現(xiàn)的頁(yè)面
這個(gè)小項(xiàng)目分為前臺(tái)和后臺(tái)
前臺(tái)需要兩個(gè)頁(yè)面，第一個(gè)頁(yè)面是一打開(kāi)就可以獲得自己的實(shí)時(shí)位置，顯示當(dāng)前位置與當(dāng)前的經(jīng)緯度，這兩項(xiàng)是自動(dòng)獲取的，還有標(biāo)題和電話是可以自己添加的，點(diǎn)擊添加，就是到達(dá)百度地圖的頁(yè)面，你剛剛添加的東西就會(huì)在這個(gè)地圖上顯示，形成一個(gè)標(biāo)注，點(diǎn)擊標(biāo)注，里面顯示的就是剛剛你添加的標(biāo)題和電話。
后臺(tái)就是顯示你添加的那些信息，也就是說(shuō)你在添加的時(shí)候，就已經(jīng)把他存入數(shù)據(jù)庫(kù)了，你可以通過(guò)后臺(tái)來(lái)修改他的標(biāo)題和電話，其他兩項(xiàng)不可改，或是可以直接刪除，刪除的話，地圖上的小標(biāo)注也會(huì)消失。
功能差不多就是這些，當(dāng)時(shí)寫的時(shí)候，沒(méi)有具體的講清楚饒了很多彎路，當(dāng)真正理清楚了反而覺(jué)得沒(méi)有那么難了，不過(guò)確實(shí)也沒(méi)有學(xué)過(guò)，感覺(jué)好多東西都是遇到了才邊學(xué)邊會(huì)做
廢話不多說(shuō)了，先來(lái)看一下效果吧
因?yàn)橐謾C(jī)也可以用，所以做的響應(yīng)式的
他的位置取到的是這里
這個(gè)定位很不準(zhǔn)確，有時(shí)取到的位置是對(duì)的，有時(shí)候會(huì)有偏差
下面再來(lái)給他添加標(biāo)題和電話
點(diǎn)擊標(biāo)注
會(huì)轉(zhuǎn)到百度地圖
點(diǎn)擊標(biāo)識(shí)
會(huì)彈出剛才我們輸入的內(nèi)容
看一下數(shù)據(jù)庫(kù)
剛才添加的那條也進(jìn)了數(shù)據(jù)庫(kù)
還有其他兩個(gè)地點(diǎn)。我們從地圖上找一下
另外兩個(gè)標(biāo)在這里，點(diǎn)擊標(biāo)識(shí)
都可以出現(xiàn)里面的內(nèi)容
然后再來(lái)看后臺(tái)頁(yè)面
可以對(duì)其進(jìn)行修改，刪除
點(diǎn)擊修改
后面加了333，點(diǎn)擊修改
修改成功
具體就是這么一個(gè)操作
做的時(shí)候只需要參考一個(gè)網(wǎng)址就可以http://lbsyun.baidu.com/index.php?title=jspopular&qq-pf-to=pcqq.c2c
這個(gè)網(wǎng)址是關(guān)于百度地圖操作的
進(jìn)入后就是這樣的
調(diào)接口前首先要點(diǎn)擊獲取秘鑰,沒(méi)有登錄百度賬號(hào)的，首先會(huì)讓你登錄，登陸后會(huì)出現(xiàn)一個(gè)這樣的頁(yè)面
你可以創(chuàng)建應(yīng)用，內(nèi)容可以隨便填
創(chuàng)建了之后就會(huì)出現(xiàn)你創(chuàng)建好的應(yīng)用
那個(gè)AK就是百度地圖接口的秘鑰
然后再打開(kāi)一開(kāi)始的窗口
功能介紹里面的小功能隨便點(diǎn)進(jìn)一個(gè)
然后就到達(dá)了這個(gè)頁(yè)面
可以參考著這個(gè)來(lái)寫
做這個(gè)小項(xiàng)目需要一個(gè)數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)如下
下面展示一下我的源代碼把
前臺(tái)添加頁(yè)代碼部分
<!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>無(wú)標(biāo)題文檔</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">標(biāo)注您當(dāng)前位置，并添加信息</h2><div id="r1"><form action="baidutj.php" method="post"><div>地 址：<input type="text" name="dizhi" id='di' /></div><div>經(jīng)緯度：<input type="text" name="du" id="result_"/></div><div>標(biāo) 題：<input type="text" name="biao" /></div><div>電 話：<input type="text" name="dian" /></div><br /><div><input type="submit" value="標(biāo)注" /></div></form><br /><p id="r3">注：地址和經(jīng)緯度取您的實(shí)時(shí)位置,標(biāo)注后會(huì)顯示百度地圖</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>
這里的思路是這樣的，先找到自己實(shí)時(shí)的經(jīng)緯度，然后再根據(jù)經(jīng)緯度轉(zhuǎn)換為實(shí)時(shí)地址名
運(yùn)行起來(lái)就是這樣的
可能要等一小會(huì)，才會(huì)拾取到你的位置
然后再來(lái)寫添加的處理頁(yè)面
<?php$dizhi=$_POST["dizhi"];$du= $_POST["du"];$biao = $_POST["biao"];$dian = $_POST["dian"];//造連接對(duì)象$db = new MySQLi("localhost","root","726","ziyuan");//寫SQL語(yǔ)句$sql = "insert into ditu values('','{$dizhi}','{$du}','{$biao}','{$dian}')";//執(zhí)行$r=$db->query($sql);if($r)
{ header("location:baiduditu1.php");
}else{ echo "標(biāo)注失??！";
}
就是普通的添加語(yǔ)句
再來(lái)看前臺(tái)的地圖部分
<!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>給多個(gè)點(diǎn)添加信息窗口</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()); //添加默認(rèn)縮放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默認(rèn)縮略地圖控件
map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角，打開(kāi)
map.enableScrollWheelZoom(true); //啟用滾輪放大縮小，默認(rèn)禁用
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/>標(biāo)題：{$v[2]}<br/>電話：{$v[3]}'],
";
}?>]; var opts = {
width : 350, // 信息窗口寬度
height: 100, // 信息窗口高度
title : "信息窗口" , // 信息窗口標(biāo)題
enableMessage:true//設(shè)置允許信息窗發(fā)送短息 }; 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])); // 創(chuàng)建標(biāo)注
var content = data_info[i][2];
map.addOverlay(marker); // 將標(biāo)注添加到地圖中
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); // 創(chuàng)建信息窗口對(duì)象
map.openInfoWindow(infoWindow,point); //開(kāi)啟信息窗口 }</script>
這里的標(biāo)注是根據(jù)有幾個(gè)位置就創(chuàng)建幾個(gè)，然后就是它的信息窗口
后臺(tái)代碼部分
<!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>無(wú)標(biāo)題文檔</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>經(jīng)緯度</td>
<td>標(biāo)題</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> <a class='a1' href='baidusc.php?id={$v[0]}' onclick=\"return confirm('確定刪除么')\">刪除</a></td></tr>";
}?>
</table>
<br />
<p id="q2">注：可修改信息中的標(biāo)題和電話<br />數(shù)據(jù)刪除后地圖的標(biāo)識(shí)也會(huì)刪除</p>
</html>
這里的操作就簡(jiǎn)單一點(diǎn)了，刪改查
修改部分代碼
<!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>無(wú)標(biāo)題文檔</title>
</head>
<body>
<h1>修改地圖信息</h1>
<?php$id = $_GET["id"];//造連接對(duì)象$db = new MySQLi("localhost","root","726","ziyuan");//寫SQL語(yǔ)句$sql = "select * from ditu where id='{$id}'";//執(zhí)行$result =$db->query($sql);//取數(shù)據(jù)$attr = $result->fetch_row();?>
<form action="baiduxgcl.php" method="post">
<div>地 址：<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>標(biāo) 題：<input type="text" name="biaoti" value="<?php echo $attr[3] ?>"/></div>
<br />
<div>電 話：<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"];//造連接對(duì)象$db = new MySQLi("localhost","root","726","ziyuan");//寫SQL語(yǔ)句$sql = "update ditu set biaoti='{$biaoti}',tem='{$tem}' where id='{$id}'";//執(zhí)行$r=$db->query($sql);if($r)
{ header("location:baiduht.php");
}else{ echo "修改失??！";
}
最后就是刪除部分代碼
<?php$id= $_GET["id"];//造連接對(duì)象$db= new MySQLi("localhost","qishuang","qishuang","qishuang");//寫SQL語(yǔ)句$sql = "delete from ditu where id='{$id}'";//執(zhí)行$r=$db->query($sql);if($r)
{ header("location:baiduht.php");
}else{ echo "刪除失敗！";
}
這樣一整個(gè)就做完了
-----------------------------------------------------------------------------------
還有一種功能，就是輸入地址可以讀出他的經(jīng)緯度，然后從地圖上立馬找到
這個(gè)功能不跟大家細(xì)說(shuō)了，下面我把源代碼寫下面
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>根據(jù)地址查詢經(jīng)緯度</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="寧波天一廣場(chǎng)" style="margin-right:100px;"/> 查詢結(jié)果(經(jīng)緯度)：<input id="result_" type="text" /> <input type="button" value="查詢" onclick="searchByStationName();"/> <div id="container"
http://www.cnblogs.com/qishuang/p/6721989.html
延伸閱讀
- 我相信在不久的將來(lái)我們會(huì)有自己的一片天空 2023-04-18
- 要想為事業(yè)多添一把火，自己就得多添一捆材 2023-04-18
- 讓自己爭(zhēng)當(dāng)一名對(duì)社會(huì)有所貢獻(xiàn)的人 2023-04-15
- 完成了自己的初心 2022-07-17
- 青島海辰信息科技有限公司 2022-07-12
- 博觀而約取，厚積而薄發(fā) 2022-07-12
- 萬(wàn)碼學(xué)堂2019級(jí)學(xué)員王*鑫【上海尼羅河信息科技有限公司山東分公司 】 2021-05-19
- 萬(wàn)碼學(xué)堂2019級(jí)學(xué)員湯*錦【青島優(yōu)米信息技術(shù)有限公司】 2021-05-19
- 萬(wàn)碼學(xué)堂2020級(jí)學(xué)員牛*超【青島優(yōu)米信息技術(shù)有限公司】 2021-05-19
- 萬(wàn)碼學(xué)堂2020級(jí)學(xué)員孫*存【青島優(yōu)米信息技術(shù)有限公司】 2021-05-19
我相信在不久的將來(lái)我們會(huì)有自己的一片天空