|
 截图示例
<!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.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);
? ? ? ? ? ? ? ? //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,-10)});
? ? ? ? ? ? ? ? map.removeOverlay(mk.getLabel());//删除之前的label?
? ? ? ? ? ? ? ? mk.setLabel(label);
? ? ? ? ? ? ? ??
? ? ? ? ? ? ?});
? ? ? ? ? ? ?
? ? ? ? }
? ? ? ??
? ? ? ??
? ? ? ??
? ? </script>
?</body>
</html> （编辑：北几岛）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
