來源：轉(zhuǎn)載 發(fā)布時間：2018-06-30 17:13:52 閱讀量：1457
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;font-family:"微軟雅黑";font-size:14px;}
#allmap{height:500px;width:100%;}
.optionpanel{margin: 10px;}
#r-result{width:100%;}
#r-result p{margin:5px 0 0 10px;}
</style>
<!--<script type="text/javascript" src="http://mapclick.map.baidu.com/data/98_36_11_018.js"></script>-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘鑰AK"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>個性底圖設(shè)置模板Demo頁</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
<div class="optionpanel">
<label>選擇主題</label>
<select id="stylelist" onchange="changeMapStyle(this.value)"></select>
</div>
</div>
<div>
要查詢的地址：<input id="text_" type="text" value="北京市天安門廣場" style="margin-right:100px;"/>
查詢結(jié)果(經(jīng)緯度)：<input id="result_" type="text" />
<input type="button" value="地址查詢經(jīng)緯度" onclick="searchByStationName();"/>
</div>
</body>
</html>
<script type="text/javascript" src="http://lbsyun.baidu.com/custom/stylelist.js"></script>
<script type="text/javascript">
var longitude = "";//經(jīng)度
var latitude = "";//緯度
//1.地圖樣式,初始化模板選擇的下拉框
var sel = document.getElementById('stylelist');
for(var key in mapstyles){
var style = mapstyles[key];
var item = new Option(style.title,key);
sel.options.add(item);
}
var map = new BMap.Map("allmap");
window.map = map;
var point = new BMap.Point(116.331398,39.897445);
map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.enableContinuousZoom(); //啟用地圖慣性拖拽，默認(rèn)禁用
map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件
map.enableScrollWheelZoom(); //啟用滾輪放大縮小
map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
map.disable3DBuilding();
map.centerAndZoom(point, 14);
map.setMapStyle({style:'normal'}); //設(shè)置模板的初始風(fēng)格，模板頁可以查看http://lbsyun.baidu.com/custom/list.htm
function changeMapStyle(style){
map.setMapStyle({style:style});
$('#desc').html(mapstyles[style].desc);
}
// 2,自動定位,百度地圖API功能
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
}
else {
alert('failed'+this.getStatus());
}
}, {enableHighAccuracy: true})
//3.構(gòu)建搜索
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允許自動調(diào)節(jié)窗體大小
//4.開始做最關(guān)鍵的一步了，就是獲取地址的具體經(jīng)緯度：
var searchByStationName = function(){
var keyword = document.getElementById("text_").value;
//搜索回調(diào)方法
localSearch.setSearchCompleteCallback(function (searchResult) {
//alert(searchResult);
var poi = searchResult.getPoi(0);
document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; //獲取經(jīng)度和緯度，將結(jié)果顯示在文本框中
//設(shè)置搜索到的經(jīng)度和緯度坐標(biāo),用于顯示紅點
longitude = poi.point.lng;
latitude = poi.point.lat;
map.centerAndZoom(poi.point, 13);
//搜索顯示位置
fn();
});
localSearch.search(keyword);
}
//5.單擊獲取點擊的經(jīng)緯度
map.addEventListener("click",function(e){
//打印經(jīng)度和緯度
alert("經(jīng)度:"+e.point.lng + "," + "緯度:" +e.point.lat);
longitude = e.point.lng;
latitude = e.point.lat;
});
//6.逆地址解析,點擊地圖展示詳細地址
var geoc = new BMap.Geocoder();
map.addEventListener("click", function(e){
var pt = e.point;
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
//位置詳細地址
alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
});
});
// 7,輸入框提示百度地圖API功能
function G(id) {
return document.getElementById(id);
}
//建立一個自動完成的對象
var ac = new BMap.Autocomplete(
{"input" : "text_"
,"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;
});
//鼠標(biāo)點擊下拉列表后的事件
var myValue;
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; //獲取第一個智能搜索的結(jié)果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加標(biāo)注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
//8,標(biāo)記位置
function fn() {
if(longitude != "" && latitude != ""){
map.clearOverlays();
var new_point = new BMap.Point(longitude,latitude);
var marker = new BMap.Marker(new_point); // 創(chuàng)建標(biāo)注
map.addOverlay(marker); // 將標(biāo)注添加到地圖中
map.panTo(new_point);
}
}
</script>
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
