zoukankan      html  css  js  c++  java
  • 百度地图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;  100px;">
            1</div>
        <div id="container" style=" 800px; height: 500px">
        </div>
        <div id="r-result" style="float: left;  100px;">
            打印坐标</div>
        <div id="result">
        </div>
    </body>
    </html>
  • 相关阅读:
    精准医疗
    生物信息学的研究过程
    蛋白质结构预测
    CP
    基因组大小控制因素
    RNA组研究困难
    输入input文本框的 U+202D和U+202C是什么
    ruby-get-url-query-params
    golang send post request
    nginx location配置
  • 原文地址:https://www.cnblogs.com/gengaixue/p/4115534.html
Copyright © 2011-2022 走看看