百度地图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>

 

posted on 2014-11-22 19:28  AlexGeng  阅读(559)  评论(0)    收藏  举报

导航