HTML容器
<div id="map" style="width: 100%;height: 450px;"></div> <div id="gps" style="width: 100%;height: 20px;"></div> <div id="bd" style="width: 100%;height: 20px;"></div> <div id="geo" style="width: 100%;height: 20px;"></div>
异步加载地图
/*百度地图经纬度选择插件*/ var centerCords = "113.503484,27.652063"; function map_load() { var load = document.createElement("script"); load.src = "//api.map.baidu.com/api?v=3.0&ak=11Z8uiP8kIz6AG0**&callback=map_init"; document.body.appendChild(load); } window.onload = map_load;
初始化地图
//初始化地图; var map; function map_init() { map = new BMap.Map("map", {enableMapClick: false}); var point = new BMap.Point(centerCords.split(",")[0], centerCords.split(",")[1]); map.centerAndZoom(point, 15); map.enableScrollWheelZoom(); // 添加定位控件; var geolocationControl = new BMap.GeolocationControl(); map.addControl(geolocationControl); //H5定位; navigator.geolocation.getCurrentPosition(function (position) { var x = position.coords.longitude; var y = position.coords.latitude; $("#gps").html("GPS坐标:" + x + "," + y); var ggPoint = new BMap.Point(x, y); //GPS标注; var markergg = new BMap.Marker(ggPoint); map.addOverlay(markergg); //添加GPS marker var labelgg = new BMap.Label("GPS坐标", {offset: new BMap.Size(20, -10)}); markergg.setLabel(labelgg); //添加GPS label //BD转换; var convertor = new BMap.Convertor(); var pointArr = []; pointArr.push(ggPoint); convertor.translate(pointArr, 1, 5, translateCallback); }, function (err) { console.log(err.code); // code:返回获取位置的状态 //0:不包括其他错误编号中的错误 //1:用户拒绝浏览器获取位置信息 //2:尝试获取用户信息,但失败了 //3:设置了timeout值,获取位置超时了 }, { enableHighAcuracy: true, //位置是否精确获取 timeout: 5000,//获取位置允许的最长时间 maximumAge: 0 //多久更新获取一次位置 }) //坐标转换完之后的回调函数 translateCallback = function (data) { if (data.status === 0) { var marker = new BMap.Marker(data.points[0]); map.addOverlay(marker); $("#bd").html("百度坐标:" + data.points[0].lng + "," + data.points[0].lat); var label = new BMap.Label("百度坐标", {offset: new BMap.Size(20, -10)}); marker.setLabel(label); map.setCenter(data.points[0]); } } //百度地图自动定位; bdGeo(); function bdGeo() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { //var mk = new BMap.Marker(r.point); //map.clearOverlays(); map.panTo(r.point); //alert('您的位置:' + r.point.lng + ',' + r.point.lat); $("#geo").html("定位坐标:"+r.point.lng + "," + r.point.lat) var marker = new BMap.Marker(points); map.addOverlay(marker); /* var points = new BMap.Point(r.point.lng, r.point.lat); //返回当前中心点; map.centerAndZoom(points, 17); //添加标注; var marker = new BMap.Marker(points); map.addOverlay(marker); marker.enableDragging(); marker.addEventListener('dragend', function () { //console.log(marker.getPosition().lat); $("#L_lnglat").val(marker.getPosition().lng + "," + marker.getPosition().lat) })*/ } else { alert('failed' + this.getStatus()); } }, function (error) { console.log(error); }, { enableHighAccuracy: true,//是否要求高精度的地理位置信息 timeout: 1000,//对地理位置信息的获取操作做超时限制 maximumAge: 0//设置缓存有效时间 }); } }
lockdatav Done!