您的位置：首页 > 其它

百度地图的定位以及拖拽（显示坐标位置）

2018-01-08 16:45 309 查看

截图示例

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title></title>

<style type="text/css">

html{height:100%}

body{height:100%;margin:0px;padding:0px}

#map_canvas{

margin:0 auto;

border:2px solid #f9f7f6;

width:80%;

height:80%;

}



</style>



</head>

<body>



<div id="map_canvas"></div>

<script src="jquery-2.1.4.min.js"></script>

<script src="http://api.map.baidu.com/api?v=2.0&ak=74af171e2b27ee021ed33e549a9d3fb9"></script>

<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

<script type="text/javascript">

var map = new BMap.Map("map_canvas"); // 创建地图实例

var initLat = 39.916527;

var initLng = 116.397128;

var point = new BMap.Point(initLng, initLat); // 创建点坐标

map.centerAndZoom(point, 13); // 初始化地图，设置中心点坐标和地图级别

//var marker = new BMap.Marker(point); // 创建标注

//map.addOverlay(marker); // 将标注添加到地图中

map.enableScrollWheelZoom(); // 启用滚轮放大缩小

map.addControl(new BMap.NavigationControl()); // 启用放大缩小尺



//获取当前位置

var geolocation = new BMap.Geolocation();

geolocation.getCurrentPosition(function(r){

if(this.getStatus() == BMAP_STATUS_SUCCESS){

mk = new BMap.Marker(r.point);

mk.addEventListener("dragend", showInfo);

mk.enableDragging(); //可拖拽



getAddress(r.point);

map.addOverlay(mk);//把点添加到地图上

map.panTo(r.point);

}else {

alert('failed'+this.getStatus());

}

});



//绑定Marker的拖拽事件

function showInfo(e){

var gc = new BMap.Geocoder();

gc.getLocation(e.point, function(rs){

var addComp = rs.addressComponents;

var address = addComp.provi
4000
nce + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址

alert(address);

//画图 ---》显示地址信息

var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});

map.removeOverlay(mk.getLabel());//删除之前的label

mk.setLabel(label);

//alert(e.point.lng + ", " + e.point.lat + ", "+address);

});

}



//获取地址信息，设置地址label

function getAddress(point){

var gc = new BMap.Geocoder();



gc.getLocation(point, function(rs){

var addComp = rs.addressComponents;

var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址

alert(address);

//画图 ---》显示地址信息

var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});

map.removeOverlay(mk.getLabel());//删除之前的label

mk.setLabel(label);



});

}







</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航