Question

我正在尝试使线几何从点击的点通过。当我通过添加数据致电google.maps.geometry.poly.isLocationOnEdge时直接在地图上显示这些功能，我获得了成功的结果。

您可以从此JSFiddle1

中查看示例代码

代码段（来自fiddle1）：

<!DOCTYPE html>
<html>

<head>
  <title>GOOGLE Map</title>
  <link rel="icon" href="google.jpg" type="image/gif" sizes="16x16">
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    #map {
      height: 100%;
    }
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map">
  </div>
  <script>
    var map;
    var TILE_SIZE = 256;

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lng: 73.76606472,
          lat: 46.7578125
        },
        zoom: 21
      });
      //  map.data.loadGeoJson(href = "groupgeo.json");
      // map.data.addListener('click', identifyFeatures );
      map.addListener('click', identifyFeatures);
      var cord = [{
          lat: 44.7578125,
          lng: 72.76606472
        },
        {
          lat: 46.7578125,
          lng: 73.76606472
        }
      ];
      var flightPath = new google.maps.Polyline({
        path: cord,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
      flightPath.setMap(map);

      function identifyFeatures(evt) {
        var featuresHits = [];
        if (google.maps.geometry.poly.isLocationOnEdge(evt.latLng, flightPath, 0.123444)) {
          featuresHits.push(flightPath);

        }
        alert("Total Features: " + featuresHits.length);
      };
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxBykE_KdCA6Etkewrera3hO3qep0IOxM&callback=initMap" async defer></script>
</body>

</html>

但是当我致电google.maps.geometry.poly.isLocationOnEdge时，添加了通过数据层在地图上绘制要素我得到的是这种方法的结果总是错误（甚至不取决于我设置的容忍度）

您可以从此JSFiddle2中查看示例代码。

代码段（来自fiddle2）：

<!DOCTYPE html>
<html>

<head>
  <title>GOOGLE Map</title>
  <link rel="icon" href="google.jpg" type="image/gif" sizes="16x16">
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    #map {
      height: 100%;
    }
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map">
  </div>
  <script>
    var map;
    var TILE_SIZE = 256;

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lng: 73.76606472,
          lat: 46.7578125
        },
        zoom: 21
      });

      var geoJSON = {
        "type": "Feature",
        "id": "red_line.963",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [72.76606472, 44.7578125],
            [73.76606472, 46.7578125]
          ]
        },
        "geometry_name": "geometry",
        "properties": {
          "text_value": null,
          "redline_id": 146
        }
      };
      map.data.addGeoJson(geoJSON); //adding data layer
      map.addListener('click', identifyFeatures);


      function identifyFeatures(evt) {
        var featuresHits = [];
        map.data.forEach(function(feature) {
          var type = feature.getGeometry().getType();
          if ("LineString" == type) {
            var polygonCords = [];
            var pointOnLine = null;
            feature.getGeometry().forEachLatLng(function(latlng) {
              polygonCords.push(latlng);
            });
            var polyline = new google.maps.Polyline({
              paths: polygonCords,
            });
            if (google.maps.geometry.poly.isLocationOnEdge(evt.latLng, polyline, 0.123444)) {
              featuresHits.push(feature);
            }
          }
        });
        alert("Total Features: " + featuresHits.length);
      };
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxBykE_KdCA6Etkewrera3hO3qep0IOxM&callback=initMap" async defer></script>
</body>

</html>

有人可以告诉我为什么会这样吗？

Answer 1

您在创建google.maps.Polyline时有错字，它没有paths属性，应该是path（google.maps.Polygon有{{ 1}}属性）：

paths

应为：

var polyline = new google.maps.Polyline({
       paths: polygonCords,
});

proof of concept fiddle

代码段：

var polyline = new google.maps.Polyline({
  path: polygonCords,
});

谷歌地图的isLocationOnEdge（）方法不适用于数据层要素

1 个答案: