个人中心
gpt4 book ai didi

google-maps-api-3 - 如何保存 map 绘制状态(多边形、折线、标记)

转载 作者：行者123 更新时间：2023-12-04 08:36:53 24 4
gpt4 key购买 nike

我想在 Google map 上启用绘图功能，例如 ( see this example )
当用户完成图纸时，他会点击保存按钮将他的图纸保存在数据库或 KML 文件中，任何东西:) .. 我不知道如何保存部分？谁能帮我

最佳答案

在这里，http://jsfiddle.net/X66L4/1/尝试绘制一些圆圈，单击“保存”，然后通过切换到手形光标并再次“保存”来编辑圆圈以查看更改。

我展示了一个保存圆数据的例子，主要思想是为每种绘图类型(线、多边形、标记、圆)保留一个全局数组，并使用绘图管理器上的监听器来检测正在绘制的每种类型(完整) .

  var circles = [];

  google.maps.event.addDomListener(drawingManager, 'circlecomplete', 
    function(circle) {
      circles.push(circle);
    });

保存对绘制对象的整个引用的原因是为了继续跟踪更改。因此，对于每种类型的绘图，您都需要一个数组和监听器。

然后，当您想要保存数据时(您可能希望在每次编辑时都这样做)，遍历数组并提取最少的信息来重建它(中心、半径、路径、纬度等)。 
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
    <script type="text/javascript">
var myOptions = {
  center: new google.maps.LatLng(-25,177.5),
  zoom: 3,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};


    var map;

    function initialize() {
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.CIRCLE,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
      },
      circleOptions: {
        editable: true
      }
    });

      drawingManager.setMap(map);
      var circles = [];

      google.maps.event.addDomListener(drawingManager, 'circlecomplete', function(circle) {
        circles.push(circle);
      });

      google.maps.event.addDomListener(savebutton, 'click', function() {
        document.getElementById("savedata").value = "";
        for (var i = 0; i < circles.length; i++) {
          var circleCenter = circles[i].getCenter();
          var circleRadius = circles[i].getRadius();
          document.getElementById("savedata").value += "circle((";
          document.getElementById("savedata").value += 
            circleCenter.lat().toFixed(3) + "," + circleCenter.lng().toFixed(3);
          document.getElementById("savedata").value += "), ";
          document.getElementById("savedata").value += circleRadius.toFixed(3) + ")\n";

        }
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <button id="savebutton">SAVE</button>
    <textarea id="savedata" rows="8" cols="40"></textarea>
    <div id="map_canvas"></div>
  </body>
</html>

关于google-maps-api-3 - 如何保存 map 绘制状态(多边形、折线、标记)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10857469/

24 4 0
文章推荐： language-agnostic - 主观性在编程中的作用有多大？
文章推荐： language-agnostic - 对应的正确 OO 建模
文章推荐： twitter-bootstrap - 如何更改 Bootstrap 按钮？
文章推荐： actions-on-google - 生产版本突然不再可用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com