正文
玩转百度地图API（地图,坐标,标记,添加控件,2D图,混合图,智能搜索,地址解析器,信息窗口)
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.注册得到appkey
2.直接上代码
<!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;
padding: 0;
font-family: "微软雅黑";
} p {
margin-left: 5px;
font-size: 14px;
} #container {
height: 100%;
width: 100%;
overflow: hidden;
} #point {
display: none;
} .search {
margin-bottom: 10px;
height: 30px;
margin: 0 auto;
width: 300px;
} .center {
height: 650px;
width: 1200px;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxx"></script>
<title>BaiduMap</title>
</head><body>
<header class="search">
<input type="search" name="txtSearch" id="txtSearch">
<button id="btnSearch">搜索</button>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</header>
<div class="center">
<span id="point"></span>
<div id="container"></div>
</div>
<script type="text/javascript">
var btnSearch = document.querySelector('#btnSearch'); function initMap(point) { //默认天安门
point = point || {
lng: 116.403955,
lat: 39.915112
};
//地图
let map = new BMap.Map('container'); //坐标
let poi = new BMap.Point(point.lng, point.lat); //标记
let marker = new BMap.Marker(poi); //带有定位的导航控件
let navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
}); //定位控件
let geolocationControl = new BMap.GeolocationControl(); // 比例尺控件
let scaleCtrl = new BMap.ScaleControl(); //2D图，混合图
let mapType = new BMap.MapTypeControl({
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
anchor: BMAP_ANCHOR_TOP_LEFT
});
//默认缩略地图控件
let overView = new BMap.OverviewMapControl(); //右下角，打开
let overViewOpen = new BMap.OverviewMapControl({
isOpen: true,
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
}); //右键菜单
let menu = new BMap.ContextMenu(); //建立一个自动完成的对象
let ac = new BMap.Autocomplete({
"input": "txtSearch",
"location": map
}); //地址解析器
let geoc = new BMap.Geocoder(); //信息窗口
let infoWindow = new BMap.InfoWindow(); //let local = new BMap.LocalSearch(map); // 比例尺控件 BMapGL才支持
// let zoomCtrl = new BMap.ZoomControl(); // 3D控件 BMapGL才支持
// var navi3DCtrl = new BMap.NavigationControl3D(); // 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(poi, 16); //开启鼠标滚轮缩放
map.enableScrollWheelZoom(true); //添加标记
map.addOverlay(marker); //添加带有定位的导航控件
map.addControl(navigationControl); //添加定位控件
map.addControl(geolocationControl); //添加比例尺控件
map.addControl(scaleCtrl); //添加2D图，混合图
map.addControl(mapType); //添加默认缩略地图控件
map.addControl(overView); //添加右下角，打开
map.addControl(overViewOpen); let txtMenuItem = [{
text: '放大一级',
callback: function() {
map.zoomIn();
}
}, {
text: '缩小一级',
callback: function() {
map.zoomOut();
}
}]; for (const item of txtMenuItem) {
menu.addItem(new BMap.MenuItem(item.text, item.callback, 100));
} //添加右键菜单
map.addContextMenu(menu); //添加比例尺控件 BMapGL才支持
// map.addControl(zoomCtrl); //添加3D控件 BMapGL才支持
// map.addControl(navi3DCtrl); //定位成功事件
geolocationControl.addEventListener("locationSuccess", (e) => {
setCenterAndMarker(map, marker, e.point);
}); //地图点击事件
map.addEventListener('click', (e) => {
setCenterAndMarker(map, marker, e.point);
}); //鼠标放在下拉列表上的事件
ac.addEventListener("onhighlight", (e) => { const str = getHighLightContent(e); document.getElementById("searchResultPanel").innerHTML = str;
}); //搜索事件
btnSearch.addEventListener('click', (e) => { var txtSearch = document.getElementById('txtSearch').value; function onSearchComplete() { let pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 setCenterAndMarker(map, marker, pp);
} //智能搜索
let local = new BMap.LocalSearch(map, {
onSearchComplete: onSearchComplete
}); try {
local.search(txtSearch);
} catch (error) { }
}); //标注点击事件
marker.addEventListener('click', (e) => { geoc.getLocation(e.point, function(res) { var addComp = res.addressComponents; const sContent = `<h4 style='margin:0 0 5px 0;'>${res.address}</h4>
<p>城市:${addComp.city}</p>
<p>市区:${addComp.district}</p>
<p>街道:${addComp.street}</p>
<p>街道号:${addComp.streetNumber}</p>
<p>坐标:${Object.values(res.point).toString()}</p>`; infoWindow.setContent(sContent); marker.openInfoWindow(infoWindow); infoWindow.redraw();
}); });
} //获取文本内容
function getHighLightContent(e) { let str = ""; let _value = e.fromitem.value; let 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; return str;
} //设置中心和标注
function setCenterAndMarker(map, marker, pp) { map.setCenter(pp); //设置中心坐标 map.clearOverlays(); //移除原有的标注 marker.setPosition(pp); //设置坐标 map.addOverlay(marker); //添加标注
} initMap();
</script>
</body></html>
