百度地图用法

来源：转载发布时间：2018-06-30 17:13:52 阅读量：1238

<!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://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>个性底图设置模板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;"/>
查询结果(经纬度)：<input id="result_" type="text" />
<input type="button" value="地址查询经纬度" onclick="searchByStationName();"/>
</div>
</body>
</html>
<script type="text/javascript" src="http://lbsyun.baidu.com/custom/stylelist.js"></script>
<script type="text/javascript">
var longitude = "";//经度
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(); //启用地图惯性拖拽，默认禁用
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.disable3DBuilding();
map.centerAndZoom(point, 14);
map.setMapStyle({style:'normal'}); //设置模板的初始风格，模板页可以查看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.构建搜索
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小

//4.开始做最关键的一步了，就是获取地址的具体经纬度：
var searchByStationName = function(){
var keyword = document.getElementById("text_").value;
//搜索回调方法
localSearch.setSearchCompleteCallback(function (searchResult) {
//alert(searchResult);
var poi = searchResult.getPoi(0);
document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; //获取经度和纬度，将结果显示在文本框中
//设置搜索到的经度和纬度坐标,用于显示红点
longitude = poi.point.lng;
latitude = poi.point.lat;
map.centerAndZoom(poi.point, 13);
//搜索显示位置
fn();
});
localSearch.search(keyword);
}

//5.单击获取点击的经纬度
map.addEventListener("click",function(e){
//打印经度和纬度
alert("经度:"+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
});
//鼠标放在下拉列表上的事件
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;
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);
}

//8,标记位置
function fn() {
if(longitude != "" && latitude != ""){
map.clearOverlays();
var new_point = new BMap.Point(longitude,latitude);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
}
}
</script>

标签： HTML JS

评论：

你还没有登录，请先

客服在线

13450931319