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

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

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

34

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/

34

4

0

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

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

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

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

首页

博学

6Ren·AI

商城

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