Question

我使用Google地图制作工具制作了地图。我这样做是通过导入5个具有地址字段的不同Excel文件并将它们全部保存为不同的图层。该地图现在有大约500个地址，这些地址标有引脚，这些引脚的颜色编码为它们所属的图层。我说的没有代码，只是我创建的Google地图。

无论如何，我可以使用＆＃34; Draw Line＆＃34;工具或其他方法来选择一组标记/引脚？理想情况下，我设想能够在它们周围绘制一个形状，然后能够选择这些地址将它们保存为新的数据表或图层以导出回Excel。

有谁知道实现这个目标的方法？即使它是谷歌地图的另一个产品？非常感谢你的帮助，这将是一个救生员。

Answer 1

像这样。

<head>
  <style>
    html, body, #map-canvas {
      height: 400px;
      margin: 0px;
      padding: 0px
    }
  </style>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>    
  <script>
    var random_marker_locations = [
      new google.maps.LatLng(50.7, 4.1),
      new google.maps.LatLng(50.4, 4.2),
      new google.maps.LatLng(50.1, 4.3),
      new google.maps.LatLng(50.8, 4.4),
      new google.maps.LatLng(50.5, 4.5),
      new google.maps.LatLng(50.2, 4.6),
      new google.maps.LatLng(50.9, 4.7),
      new google.maps.LatLng(50.6, 4.8),
      new google.maps.LatLng(50.3, 4.9)
    ]

    var map;
    var markers = [];
    var polygon;
    var polygonMarkers = [];
    var polygonLocations = [];

    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(50.40, 4.34),  // Brussels, Belgium
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      // add markers
      for(var i in random_marker_locations) {
        var marker = new google.maps.Marker({position: random_marker_locations[i], map: map, title: 'marker ' + i});
        markers.push(marker);
      }

      // add a click on map event
      google.maps.event.addListener(map, 'click', function(e) {
        // set a marker there, with a small measle icon
        var position = e.latLng;
        polygonLocations.push(position);
        polygonMarkers.push(new google.maps.Marker({
          icon: 'https://maps.gstatic.com/intl/en_ALL/mapfiles/markers2/measle.png',
          position: position, 
          map: map
        }));
        // now let's add a polygon
        drawPolygon(polygonLocations);
      });
    }

    // draws a polygon
    function drawPolygon(points) {
      if(points.length < 3) {
        return;
      }
      // first delete the previous polygon
      if(polygon) {
        polygon.setMap(null);
      }
      // @see https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
      polygon = new google.maps.Polygon({
        paths: points,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map
      });
      // display to input
      displaySelectedMarkers(polygon);
    }
    // display the selected markers to input.  
    function displaySelectedMarkers(polygon) {
      // empty the input
      document.getElementById('selected_markers').value = '';
      var a=0;  // I use this to set a comma between the values, but no comma at the end
      for(var i in random_marker_locations) {
        // @see https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation
        if (google.maps.geometry.poly.containsLocation(random_marker_locations[i], polygon)) {
          document.getElementById('selected_markers').value += (a++>0 ? ', ' : '') + i ;
        }
      }
    }

    function clearSelection() {
      if(polygon) {
        polygon.setMap(null);
      }
      for (var i in polygonMarkers) {
        polygonMarkers[i].setMap(null);
      }          
      polygonLocations = [];
      document.getElementById('selected_markers').value = '';
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>
<body>
  <div id="map-canvas"></div>
  <hr>
  <input id="selected_markers"><br>
  <input type="button" onclick="clearSelection()" value="Clear polygon"><br>
  Click to select a polygon selection around the markers
</body>

Google Map：如何通过单击或绘制周围的形状并将其保存为数据表来选择我导入的多个标记？

1 个答案: