百度地图Api进阶教程-点击生成和拖动标注4.html
<!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>12.1</title> <script type="text/javascript"> var iscreatr = false; function initialize() { var map = new BMap.Map("container", { minZoom: 12, maxZoom: 25 }); map.centerAndZoom("成都", 13); map.enableScrollWheelZoom(true); map.addEventListener("click", function (e) { if (iscreatr == true) return; //---------------------------------------------遮盖物--------------------------------------------- iscreatr = true; var point = new BMap.Point(e.point.lng, e.point.lat); // 创建标注对象并添加到地图 var marker = new BMap.Marker(point); var lable = new BMap.Label("我是可以拖拽的", { offset: new BMap.Size(20, -10) }); marker.setLabel(lable); map.addOverlay(marker); marker.enableDragging(); //可拖拽 marker.addEventListener("dragend", function (e) { document.getElementById("r-result").innerHTML = e.point.lng + "," + e.point.lat; //打印拖动结束坐标 }); }); } function loadScript() { var script = document.createElement("script"); script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript; </script> </head> <body> <div style="float: left; width: 100px;"> 1</div> <div id="container" style="width: 800px; height: 500px"> </div> <div id="r-result" style="float: left; width: 100px;"> 打印坐标</div> <div id="result"> </div> </body> </html>