javascript - 谷歌地图错误 - a.lng 不是函数-6ren

javascript - 谷歌地图错误 - a.lng 不是函数

转载作者：数据小太阳更新时间：2023-10-29 05:57:20

35

4

我计划在我的一个应用程序中使用谷歌地图“containsLocation()”API。文档链接是 - https://goo.gl/4BFHCz

我正在使用相同的示例。这是我的代码。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polygon arrays</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // This example requires the Geometry library. Include the libraries=geometry
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          //center: {lat: 24.886, lng: -70.269},
          center: {lat: 12.9629277, lng: 77.7178972},
          zoom: 30,
        });

        /*var triangleCoords = [
          {lat: 25.774, lng: -80.19},
          {lat: 18.466, lng: -66.118},
          {lat: 32.321, lng: -64.757}
        ];*/

        var triangleCoords = [
          {lat: 12.96301273, lng: 77.71785952},
          {lat: 12.96314857, lng: 77.71784072},
          {lat: 12.96316124, lng: 77.71784037},
          {lat: 12.96295465, lng: 77.71788993},
          {lat: 12.96293329, lng: 77.7179345},
        ];

        var bermudaTriangle = new google.maps.Polygon({paths: triangleCoords});

        google.maps.event.addListener(map, 'click', function(e) {

          var curPosition = {"lat":12.9629277,"lng":77.7178972};
          //var curPosition = e.latLng;

          console.log("e content : "+JSON.stringify(e.latLng));
          console.log("curPosition content : "+JSON.stringify(curPosition));

          var resultColor =
              google.maps.geometry.poly.containsLocation(curPosition, bermudaTriangle) ?
              'red' :
              'green';

          new google.maps.Marker({
            position: curPosition,
            map: map,
            icon: {
              path: google.maps.SymbolPath.CIRCLE,
              fillColor: resultColor,
              fillOpacity: .2,
              strokeColor: 'white',
              strokeWeight: .5,
              scale: 10
            }
          });


        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCiAur6ANJsV776iVmMDJcHYjQkXrXyu8s&libraries=geometry&callback=initMap"
         async defer></script>
  </body>
</html>

如果您看到我已经创建了一个 curPosition 变量来保存 latLng 数据。我在这里的问题是只要 var curPosition = e.latLng; 就可以正常工作，但是，当我将其更改为 var curPosition = {"lat":12.9629277,"lng": 77.7178972}; 它开始显示错误 “Uncaught TypeError: a.lng is not a function”。

无法理解为什么会这样？任何线索...？

附上 Console.log 屏幕截图

问候

最佳答案

containsLocation 方法需要 google.maps.LatLng 作为“点”(至少目前是这样)，您不能将 google.maps.LatLngLiteral 用于 currentLocation.

来自 the documentation:

containsLocation(point:LatLng, polygon:Polygon) | Return Value: boolean

Computes whether the given point lies inside the specified polygon.

 var curPosition = new google.maps.LatLng(12.9629277,77.7178972);

代码片段:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 12.9629277,
      lng: 77.7178972
    },
    zoom: 30,
  });

  var triangleCoords = [
     {lat: 12.96301273,lng: 77.71785952}, {lat: 12.96314857, lng: 77.71784072}, {lat: 12.96316124, lng: 77.71784037}, {lat: 12.96293329, lng: 77.7179345}, {lat: 12.96295465, lng: 77.71788993}];
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    map: map
  });

  var curPosition = new google.maps.LatLng(12.9629277, 77.7178972);
  console.log("curPosition content : " + JSON.stringify(curPosition));

  var resultColor =
    google.maps.geometry.poly.containsLocation(curPosition, bermudaTriangle) ?
    'red' :
    'green';

  new google.maps.Marker({
    position: curPosition,
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: resultColor,
      fillOpacity: .2,
      strokeColor: 'white',
      strokeWeight: .5,
      scale: 10
    }
  });
  var curPositionB = new google.maps.LatLng(12.963, 77.71788993);
  var resultColorB = google.maps.geometry.poly.containsLocation(curPositionB, bermudaTriangle) ?
    'red' :
    'green';

  new google.maps.Marker({
    position: curPositionB,
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: resultColorB,
      fillOpacity: .2,
      strokeColor: 'white',
      strokeWeight: .5,
      scale: 10
    }
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

关于javascript - 谷歌地图错误 - a.lng 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35726109/

35

4

0

文章推荐： amazon-web-services - 使用传输中加密连接到 AWS ElastiCache

文章推荐： redis - 防止 Redis 保存到磁盘

文章推荐： javascript - Angular 到 Aurelia 的过渡——一些基本问题

php - 将 lat/lng 与另一个 lat/lng 进行比较
这个问题在这里已经有了答案: Measuring the distance between two coordinates in PHP (13 个答案) 关闭 9 年前。我在数据库中存储了 fi
javascript - 事件 lat/lng 不匹配 AJAX 成功数据 lat/lng
我想在 Google map 标记完成拖动时检索正确的 lat/lng。但是对于同一个精确点，它给出了两个不同的(非常近似)坐标。同一掉落的示例结果: evt.latLng:39.82213542
mysql - 如果 lat/lng 为空，则应将什么放入 lat/lng 数据库字段中？
我有一个 mysql 插入语句，当系统无法获取用户的纬度/经度时，该语句会中断。sql 是这样的: INSERT INTO users(user_email, first_name , last_na
javascript - 隐藏的 'lat' 和 'lng' 字段未删除，因此我的脚本仍在从不正确的地理位置搜索 lat 和 lng 结果
我有一个页面，用户可以在“邮政编码”字段中输入他们的地址。我还有一个“检测位置”按钮，可以对用户地址进行地理定位。当他们单击此按钮时，他们的城市名称和邮政编码将回显到“邮政编码”字段中，并且纬度和经度
PHP/SQL 使用一个 SELECT 语句从多个其他 lat/lng 位置获取所有 lat/lng 位置
我有两个表:一个 map 表，其中包含大约 3,000 个纬度/经度对，代表现实世界的“标记”位置；还有一个建筑物表，其中有数百个纬度/经度对，也代表真实世界的建筑物位置。我想做的是获取所有建筑物可见
google-maps - 给定一个 lat/lng 坐标，计算 10 公里区域的最小和最大 lat/lng 值
假设我有一个 lat lng 坐标，我想把它放在一个 10 公里宽的正方形的中心，然后得到最小的 lat/lng 和最大的 lat/lng。有没有一种简单的方法可以做到这一点已经存在？最佳答案如
php - MySql:查找 table2.name WHERE table1.lat = table2.lat AND table1.lng = table2.lng;
在过去的几天里，我一直在努力寻找这个问题的答案。我有一个 GPS 数据路线表。和一张积分表。我需要的是一个 MySql 语句，对于给定的路线，将告诉我两个端点的 Point.Name。我可以写 4 个
javascript - 如果我有一个 lat/lng，我假设它位于 0,0 那么我如何计算另一对 lat/lng 的 x, y 坐标？
我见过这个问题的许多变体，但我无法将他们的答案与我的具体需求联系起来。我有几组 3 纬度/经度坐标对。任何集合中的坐标彼此之间都在几公里之内。对于每个集合，我想将坐标转换为 x/y 值，以便我可以
javascript - 在React组件中动态使用[lng].js
我正在为 React 创建一个节点模块，只是为了尝试一下并了解更多信息。但我面临一个问题。我想让这个模块没有任何依赖项(React 除外)，但我也想在我的模块中包含 I18n。我开始像这样的文件结构:
传单圆半径根据 y/lng 坐标而变化
我使用mapbox/leaflet来显示人体图片而不是常规 map 。我正在使用传单绘制，我需要能够创建一个圆并在保持其半径的同时移动它。然而，当我将其移向 map /屏幕底部时，大小呈指数级增加。
java - 数字格式异常 :Invalid lng
大家好，我目前正在 android 中使用 DH key 交换开发客户端服务器应用程序。我在客户端将字符串转换为 long 时遇到问题，奇怪的是该转换适用于前 2 个变量 pValue 和 gValu
mysql - 从MySQL中的多点数据类型获取点数组(lat，lng)
我试图从数据库中的多点列获取值（纬度和经度）。我有针对点的有效解决方案，但找不到针对多点的解决方案。我有一个点及其坐标的SQL查询，对于多点及其点我需要这样的东西： SELECT ASWKT(poi
php - 获取数百个地址的 lat lng
我有一个保存地址的 mysql 记录数据库。我想迭代这些地址并获取每个地址的地理编码 lat 和 lng 并将它们放入数据库中。我正在使用 php。但是当我运行此代码时，我收到一条错误消息“FastC
javascript - 从可变长度字符串中提取 lat、lng
我想要提取纬度。和来自字符串的经度值，如下所示: var data = "(-20.210696507479017, -70.14000177383423),(-20.21202551027535,
查找距给定 Lat Lng 位置一定距离内的所有纬度经度位置的算法
给定具有经纬度位置的地点数据库，例如 40.8120390、-73.4889650，我如何找到特定位置给定距离内的所有位置？从数据库中选择所有位置，然后一个一个地遍历它们，获取与起始位置的距离，看它
javascript - 谷歌地图错误 - a.lng 不是函数
我计划在我的一个应用程序中使用谷歌地图“containsLocation()”API。文档链接是 - https://goo.gl/4BFHCz 我正在使用相同的示例。这是我的代码。
php - 在 lat/lng 边界框中查找位置
我有 4 个变量: $southwest_lat、$southwest_lng、$northeast_lat、$northeast_lng 我还有一个数据库表，其中包含以下字段:名称、纬度和经度。 /
javascript - 谷歌地图 lng + lat 到隐藏字段不起作用
我正在尝试将标记数据放入表单上的隐藏字段中。我不确定为什么这不起作用，它一定是我的 js 语法中的某些内容: var initialLocation; var siberia = new google
javascript - map.getCenter().lng() 返回对象和字符串？
我正在使用 Google map 函数 map.getCenter().lng(); 它返回 lng 值，但一旦我尝试对 lng 值执行任何操作，我就会收到错误，例如: var lang = sawd
java - 如何检查 lng/lat 边界框是否与另一个相交？
假设我有几个带有 4 个坐标对(仅长/纬度)的边界框，每个坐标对代表一个方框的 4 个角。我如何检查其中两个框是否相交？我知道我可以使用java.awt.Rectangle来检查两个矩形是否相交，但

首页

博学

6Ren·AI

商城

javascript - 谷歌地图错误 - a.lng 不是函数