web前端PC端百度地圖的開發(fā)指導(dǎo)

發(fā)表時(shí)間：2018-1-12

發(fā)布人：葵宇科技

瀏覽次數(shù)：53

先看效果圖片：

百度地圖開發(fā)效果圖

最終效果描述：

1.搜索：有搜索提示，并且可以根據(jù)選擇進(jìn)行定位；

2.獲取經(jīng)緯度：點(diǎn)擊地圖中某點(diǎn)，在文本框中獲取當(dāng)前點(diǎn)的經(jīng)緯度的值；

3.獲取詳細(xì)地址：點(diǎn)擊地圖中某點(diǎn)時(shí)，將該點(diǎn)的詳細(xì)地址顯示在文本框中；

4.支持鼠標(biāo)滾輪控制地圖縮放；

5.支持比例尺控件；

6.支持城市列表查找，定確定地圖中心點(diǎn)；

7.支持為地圖添加文字標(biāo)簽；

===========================================================================

*基于百度地圖API開發(fā) 地圖類應(yīng)用，最重要的是要有自己的或者說(shuō)可以用的 ‘百度API密鑰 ’。百度地圖所有的功能，都基于這個(gè)密鑰為前提。

一、首先我們先嘗試一下，獲取百度API密鑰（web前端開發(fā)示例）。

1、根據(jù)網(wǎng)址：http://api.map.baidu.com/lbsapi/ 找到要操作的頁(yè)面，點(diǎn)擊API控制臺(tái)

2、進(jìn)行開發(fā)版本選擇，并提交。

3、提交后，得到剛剛注冊(cè)的秘鑰

密鑰 Ak=lhaYXHeYl3GhecbjMm7vbLKvIQcsPbdl

那么到這里我們的前期準(zhǔn)備工作就準(zhǔn)備好了，下面可以進(jìn)行數(shù)據(jù)開發(fā)了。

二、上述效果代碼開發(fā)（百度API里提供大量插件，我們要做的就是根據(jù)需求，進(jìn)行個(gè)人的百度地圖功能開發(fā)）：
代碼如下：

1.圖片快速瀏覽：

2、代碼詳情：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>地圖定位</title>
<link rel="stylesheet" type="text/css" href="__ROOT__css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="__ROOT__css/index.css">
<script type="text/javascript" src="__ROOT__js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="__ROOT__js/bootstrap.min.js"></script>
<script type="text/javascript" src="__ROOT__js/index.js"></script>
<style type="text/css">
body, html,#allmap {
width:87.5%;
height:600px;
margin:0px auto;
font-family:"微軟雅黑";
}
a{ cursor: pointer;}
#staff_city{
width: 100%;
height:33px;
color:blue;
margin: 35px 91px;
padding-top: 10px;
}
.ui_city_change_inner{
margin-left:500px;
border:2px solid blue;
}
.citylist_popup_main{
margin-left:250px;
}
.BMap_mask{
border: 3px solid #ABB1BA;

}
.show_p_l{
font-weight: bold;
position: relative;
top:20px;
left: 90px;
}
.show_p_l>.address1{
margin-left: 90px;
}
</style>

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


<div class="show_p_l">
<span class="position1" ></span>
<span class="location1"></span>
<span class="address1"></span>
</div>


<div id="staff_city">
<input type="text" name="suggestId" id="suggestId" size="20" style="width:300px" placeholder="位置搜索">
<span id="searchResultPanel" style="border:1px solid #c0c0c0;width:150px;height:auto;display: none;"></span>
<span style="margin-left:10px;">>></span>
<input type="text" name="l-map" id="l-map" style="width:200px;margin-left:30px" value="您當(dāng)前位置經(jīng)度信息" >
<input type="text" name="r-result" id="r-result" style="width:200px" value="您當(dāng)前位置緯度信息" >
<input type="button" name="staff_ensure" id="staff_ensure" value="確定">
<input type="text" name="" id="staff_toponymy" value="詳細(xì)地址" style="width:296px;height:26px;font-size:8px;margin-left: 30px">
</div>


<div id="allmap"></div>

<script type="text/javascript">

// 獲取url的某個(gè)字段
function GetQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
var id=GetQueryString('staff_id');
var cur=GetQueryString('c');
//頁(yè)面剛加載時(shí)就發(fā)送請(qǐng)求。
$(function(){
$.post('http://123.57.45.74/feiybg1/public/index.php/admin/Testnumber/default_address',{staff_id:id},function(data){
// console.log(data);
if(data.infor.position==0){
$('.show_p_l').css('display','none');
}else{
//加載后臺(tái)傳遞過(guò)來(lái)的經(jīng)緯度
$(".position1").html("經(jīng)度坐標(biāo):"+data.infor.position+"、");
$(".location1").html("緯度坐標(biāo):"+data.infor.location);
//加載后臺(tái)傳遞過(guò)來(lái)的地理位置數(shù)據(jù)
$('.address1').html("位置名稱:"+data.infor.address+"。");
$('.show_p_l').css('display','block');
//打樁測(cè)試
// console.log(data.infor.position,data.infor.location,data.infor.address);

}

})
})
// 百度地圖API功能
// 創(chuàng)建Map實(shí)例
var map = new BMap.Map("allmap");
// 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
//將map變量存儲(chǔ)在全局
window.map = map;
//添加地圖類型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
// 設(shè)置地圖顯示的城市此項(xiàng)是必須設(shè)置的
map.setCurrentCity("北京");
//開啟鼠標(biāo)滾輪縮放
map.enableScrollWheelZoom(true);
//左上角添加比例尺
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
map.addControl(top_left_control);
//左上角添加默認(rèn)縮放平移控件
var top_left_navigation = new BMap.NavigationControl();
map.addControl(top_left_navigation);

//城市列表
map.enableInertialDragging();
map.enableContinuousZoom();
var size = new BMap.Size(10, 20);
map.addControl(new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: size,
// 切換城市之間事件
// onChangeBefore: function(){
// alert('before');
// },
// 切換城市之后事件
// onChangeAfter:function(){
// alert('after');
// }
}));

//為地圖添加文字標(biāo)簽
var point = new BMap.Point(116.417854,39.921988);
map.centerAndZoom(point, 15);
var opts = {
// 指定文本標(biāo)注所在的地理位置
position : point,
//設(shè)置文本偏移量
offset : new BMap.Size(30, -30)
}

//單擊獲取點(diǎn)擊的經(jīng)緯度
map.addEventListener("click",function(e){
// alert(e.point.lng + "," + e.point.lat);
$("#l-map").val("經(jīng)度坐標(biāo):"+e.point.lng);
$("#r-result").val("緯度坐標(biāo):"+e.point.lat);
});
//獲取用戶當(dāng)前詳細(xì)地址
var geoc = new BMap.Geocoder();

map.addEventListener("click", function(e){
var pt = e.point;
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
$('#staff_toponymy').val("詳細(xì)地址:"+addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
console.log("詳細(xì)地址:"+addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});

//輸入信息提示
function G(id) {
return document.getElementById(id);
};
//建立一個(gè)自動(dòng)完成的對(duì)象
var ac = new BMap.Autocomplete(
{"input" : "suggestId"
,"location" : map
});
//鼠標(biāo)放在下拉列表上的事件
ac.addEventListener("onhighlight", function(e) {
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
});

var myValue;
//鼠標(biāo)點(diǎn)擊下拉列表后的事件
ac.addEventListener("onconfirm", function(e) {
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

setPlace();
});

function setPlace(){
//清除地圖上所有覆蓋物
map.clearOverlays();
function myFun(){
var pp=local.getResults().getPoi(0).point;
map.centerAndZoom(pp,18);
map.addOverlay(new BMap.Marker(pp));
}
var local=new BMap.LocalSearch(map,{onSearchComplete:myFun});
local.search(myValue);
}

//點(diǎn)擊事件：向testnumber.html頁(yè)面傳值
$("#staff_ensure").click(function(){
var $position=$("#l-map").val().split(":")[1];
var $location =$("#r-result").val().split(":")[1];
var $address=$("#staff_toponymy").val().split(":")[1];
$.ajax({
type:"post",
url:"http://123.57.45.74/feiybg1/public/index.php/admin/Testnumber/add_address",
data:{staff_id:id,position:$position,location:$location,address:$address},
success:function(data){
// 對(duì)位置信息的點(diǎn)擊更新
$('.position1').html("經(jīng)度坐標(biāo):"+$position+"、");
$('.location1').html("緯度坐標(biāo):"+$location);
$('.address1').html("位置名稱"+$address+"。");
$('.show_p_l').css('display','block');
// alert('點(diǎn)擊更新');
}

})
});
$('.back').click(function(){
window.location.href='http://123.57.45.74/feiybg1/public/index.php/admin/testnumber/testnumber?c='+cur;
})
</script>
</body>
</html>

提示：如果要復(fù)制該代碼到本地運(yùn)行，請(qǐng)注意更換 ‘引用文件地址’和端口號(hào)，否則會(huì)一起一系列跨域問(wèn)題，及資源找不到的問(wèn)題。文檔內(nèi)容最開始提起的 ‘最終效果描述’ 可能措辭不太嚴(yán)謹(jǐn)，但所提效果都以代碼實(shí)現(xiàn)，代碼開發(fā)與效果描述也不是按順序來(lái)開發(fā)的，所以請(qǐng)不必再次處產(chǎn)生疑慮。由于水平有限，本文檔僅供初學(xué)者或首次開發(fā)者提供參考。如代碼有錯(cuò)誤之處，請(qǐng)見(jiàn)諒。如果有更好的開發(fā)經(jīng)驗(yàn)，感謝回復(fù)。謝謝觀看！！！；