javascript - 谷歌地图 isLocationOnEdge() 方法不适用于数据层功能-6ren

javascript - 谷歌地图 isLocationOnEdge() 方法不适用于数据层功能

转载作者：行者123 更新时间：2023-11-30 14:16:34

我正在尝试获取从点击点经过的几何线条。当我通过添加数据调用 google.maps.geometry.poly.isLocationOnEdge 时直接在 map 上针对这些功能我获得了成功的结果。

你可以从这个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 时添加通过数据层在 map 上的功能我得到这个方法的结果总是false(它甚至不取决于我设置的任何公差)

你可以从这个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>

谁能告诉我为什么会这样？

最佳答案

您在创建 google.maps.Polyline 时有错字，它没有 paths 属性，它应该是 path(google.maps.Polygon 有一个 paths 属性):

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

应该是:

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

proof of concept fiddle

代码片段:

<!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({
              path: 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>

关于javascript - 谷歌地图 isLocationOnEdge() 方法不适用于数据层功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53482028/

文章推荐：使用自定义参数的 C# 继承事件

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 谷歌地图 isLocationOnEdge() 方法不适用于数据层功能