获取百度地图

本是古典何须时尚 2021-09-13 14:48 751阅读 0赞

一.获取百度地图

![20170713152245042][]

需要调用百度的js

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> html,body,div,ul,li{ margin: 0; padding: 0; } a{text-decoration: none;} .maps_bg{ width: 600px; height: 289px; } </style> </head> <body> <div class="maps_bg" id="container"> </div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> <script src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script> <script type="text/javascript"> var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(117.10, 40.13), 11); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.MapTypeControl()); //搜索 // 创建地址解析器实例 var myGeo = new BMap.Geocoder(); var searchTxt = '福建省福州市鼓楼区铜盘路软件大道89号福州软件园D区'; // 将地址解析结果显示在地图上，并调整地图视野 myGeo.getPoint(searchTxt, function (point) { if (point) { map.centerAndZoom(point, 16); var pointMarker = new BMap.Point(point.lng, point.lat); geocodeSearch(pointMarker); map.addOverlay(new BMap.Marker(point)); } else alert("搜索不到结果"); }, "全国"); map.enableScrollWheelZoom(); // 创建CityList对象，并放在citylist_container节点内 var myCl = new BMapLib.CityList({ container: "citylist_container", map: map }); // 给城市点击时，添加相关操作 myCl.addEventListener("cityclick", function (e) { // 修改当前城市显示 document.getElementById("curCity").innerHTML = e.name; // 点击后隐藏城市列表 document.getElementById("cityList").style.display = "none"; }); map.addEventListener("click", function (e) { document.getElementById("txtlatitude").value = e.point.lat; document.getElementById("txtLongitude").value = e.point.lng; map.clearOverlays(); var pointMarker = new BMap.Point(e.point.lng, e.point.lat); // 创建标注的坐标 addMarker(pointMarker); geocodeSearch(pointMarker); }); function addMarker(point) { var myIcon = new BMap.Icon("mk_icon.png", new BMap.Size(21, 25), { offset: new BMap.Size(21, 21), imageOffset: new BMap.Size(0, -21) }); var marker = new BMap.Marker(point, { icon: myIcon }); map.addOverlay(marker); } function geocodeSearch(pt) { var myGeo = new BMap.Geocoder(); myGeo.getLocation(pt, function (rs) { var addComp = rs.addressComponents; }); } </script> </body> </html>

[20170713152245042]: /images/20210813/be6dc2e0bd8e47189370afcd2e40fb8c.png