zoukankan      html  css  js  c++  java
  • 实现输入。和开启绘图,禁止绘图【百度地图】

    实现输入。和开启绘图,禁止绘图。



    <!doctype html> 
    <html> 
    <head> 
        <meta charset="utf-8" /> 
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
       
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
        <script src="http://api.map.baidu.com/api?v=1.5&ak=1ixirBnjW51i4NoOdEKGP3Xk" type="text/javascript"></script>
    
     <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap {width: 100%; height:500px; overflow: hidden;}
        #result {width:100%;font-size:12px;}
        dl,dt,dd,ul,li{
            margin:0;
            padding:0;
            list-style:none;
        }
        p{font-size:12px;}
        dt{
            font-size:14px;
            font-family:"微软雅黑";
            font-weight:bold;
            border-bottom:1px dotted #000;
            padding:5px 0 5px 5px;
            margin:5px 0;
        }
        dd{
            padding:5px 0 0 5px;
        }
        li{
            line-height:28px;
        }
        </style>
    
        <!--加载鼠标绘制工具-->
        <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
        <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
        <!--加载检索信息窗口-->
        <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
        <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
        <title>鼠标绘制工具</title>
    </head>
    <body>
        <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> 
            <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
        </div>
        <div id="result">
            <input class="txt" type="text">
            <input class="open" type="button" value="开启绘图" />
            <input class="close" type="button" value="禁止绘图" />
    
        </div>
        <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map('map');
        var poi = new BMap.Point(116.307852,40.057031);
        map.centerAndZoom(poi, 16);
        map.enableScrollWheelZoom();  
    
      
    function closeMapDraw() {
        
          alert(123);
          // BMapLib.EventWrapper.clearListeners(map, 'click');
        //  map.removeEventListener("click");
        //removeEventListener(event:String, handler:Function)
    }
     
    
      $(".open").click(function() {
            
          var dCircleVal = $(".txt").val(); // Circle input text value 圆半径输入
             radiusNum = parseInt(dCircleVal);
          //  alert("hah");
             if (dCircleVal == "" || dCircleVal == null) {
                // $("#dCircle .messWarn").text("请输入半径");
                alert(23);
                 return;
             } 
             else {
                // $("#dCircle .messWarn").text("");
                 // $("#dialogAll").animate({
                 //     margin: '0',
                 //     top: '0',
                 //     position: "fixed",
                 //     padding: '0',
                 //     left: '0'
                 // }, 1000);
                  // map.addEventListener("click",function(e){
                
                // console.log(e.point.lng + "," + e.point.lat);
                // showInfo(e,radiusNum);
                
                // });
             }
    
        addClick();
    
         });
        $(".close").click(function(){
             alert("ww");
              removeClick();
        });
    
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        
        function showInfo(e){
             map.clearOverlays();
        circlePoint = new BMap.Point(e.point.lng, e.point.lat); // 创建点坐标  
    
        var circle = new BMap.Circle(circlePoint, radiusNum, {
            strokeColor: "blue",
            strokeWeight: 2,
            strokeOpacity: 0.5
        }); //创建圆
        map.addOverlay(circle); //增加圆
       // return circlePoint;
       // closeMapDraw();
    
    
        }
    
        
    
        function addClick(){
            map.addEventListener("click", showInfo);
        }
        function removeClick(){
            map.removeEventListener("click", showInfo);
        }
    
    </script>
    </body>
    </html>
    



    **

    附件列表

    • 相关阅读:
      织梦插件开发
      yiic使用笔记
      yii2.0学习及变化比较(一)
      yii框架设计学习笔记(一)
      Maven生成可以直接运行的jar包的多种方式(转)
      Linux下查看CPU型号,内存大小,硬盘空间的命令(详解)
      从Google Earth 中下载三维模型
      Hadoop安装所遇问题及解决方法
      智慧家居体系结构
      .Net 数据库(SqlServer2008)的备份、还原
    • 原文地址:https://www.cnblogs.com/moyuling/p/9054242.html
    Copyright © 2011-2022 走看看