<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #container { height: 100% } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx"> </script> </head> <body> <div id="container" style="width: 420px; height: 340px; border: 1px solid gray; float: left;"></div> <p> 纬度：<input name="lng" type="text" id="lng" style="width:200px;" value="120.570464"/> 经度：<input name="lat" type="text" id="lat" style="width:200px;" value="31.300216"/> 标注点所在区域：<input name="address" type="text" id="address" style="width:200px;"/> </p> <script type="text/javascript"> // http://lbsyun.baidu.com/jsdemo.htm#a1_2 var map = null; var initialFunc = function(){ map = new BMap.Map("container"); // 建立地图实例 var point = new BMap.Point(116.404, 39.915); // 建立点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.MapTypeControl()); map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用 // 自定义控件 map.addControl(new myTest.ZoomControlX()); map.addEventListener("click", function(e){ console.log(e.point.lng + ", " + e.point.lat); console.log("您点击了地图。"); }); // 拖动地图后地图中心的经纬度信息 map.addEventListener("dragend", function(){ var center = map.getCenter(); console.log("地图中心点变动为：" + center.lng + ", " + center.lat); }); var zoomendFunc = function(){ console.log("地图缩放至：" + this.getZoom() + "级"); // 移除监听事件 map.removeEventListener("zoomend", zoomendFunc); }; map.addEventListener("zoomend",zoomendFunc); // 标注功能：拖动、打标注 myTest.markerTest(map); // 浏览器定位 myTest.geolocation(map); }; var myTest = { geolocation : function(map) { //关于状态码 //BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。 //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。 //BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。 //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。 //BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。 //BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。 //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增) //BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增) //BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增) 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); console.log('您的位置：'+r.point.lng+','+r.point.lat); } else { console.log('failed'+this.getStatus()); } },{enableHighAccuracy: true}) }, // 根据坐标获取地址 geocoder : function Geocoder(point) { var gc = new BMap.Geocoder(); gc.getLocation(point, function (rs) { var addComp = rs.addressComponents; document.getElementById('address').setAttribute('value',addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); }); }, markerTest : function(map){ // 新坐标 map.clearOverlays(); var pointNew = new BMap.Point(116.404, 39.915); var marker = new BMap.Marker(pointNew); // 建立标注 map.addOverlay(marker); // 将标注添加到地图中 map.panTo(pointNew); marker.enableDragging(); // 能够拖动 //建立信息窗口 var infoWindow = new BMap.InfoWindow("这就是您公司的位置。<br/>若是不正确，请拖动红色图标"); //显示窗口 marker.openInfoWindow(infoWindow); //点击监听 marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); }); //拖动监听 marker.addEventListener("dragend", function (e) { //坐标赋值 document.getElementById('lng').setAttribute('value',e.point.lng); document.getElementById('lat').setAttribute('value',e.point.lat); myTest.geocoder(e.point); }); }, ZoomControlX : ((function(){ // 定义一个控件类，即function function ZoomControl(){ // 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffset = new BMap.Size(10, 10); } // 经过JavaScript的prototype属性继承于BMap.Control ZoomControl.prototype = new BMap.Control(); // 自定义控件必须实现initialize方法，而且将控件的DOM元素返回 // 在本方法中建立个div元素做为控件的容器，并将其添加到地图容器中 ZoomControl.prototype.initialize = function(map){ // 建立一个DOM元素 var div = document.createElement("div"); // 添加文字说明 div.appendChild(document.createTextNode("放大2级")); // 设置样式 div.style.cursor = "pointer"; div.style.border = "1px solid gray"; div.style.backgroundColor = "white"; // 绑定事件，点击一次放大两级 div.onclick = function(e){ map.zoomTo(map.getZoom() + 2); } // 添加DOM元素到地图中 map.getContainer().appendChild(div); // 将DOM元素返回 return div; } return ZoomControl; })()), }; initialFunc(); </script> </body> </html>