• 百度地图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>
  • 相关阅读:
    面向消息的持久通信与面向流的通信
    通信协议
    分布式系统简介
    Hadoop on Yarn 各组件详细原理
    Parquet文件结构笔记
    Redis部分数据结构方法小结
    Storm Ack框架笔记
    MapReduce格式与类型
    Hadoop 2.6 MapReduce运行原理详解
    Hadoop SequenceFile数据结构介绍及读写
  • 原文地址:https://www.cnblogs.com/gengaixue/p/4115534.html
Copyright © 2020-2023  润新知