草庐IT

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

coder 2025-02-27 原文

我计划在我的一个应用程序中使用谷歌地图“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/

javascriptlnggooglemapscurPositiongoogle-maps

有关javascript - 谷歌地图错误 - a.lng 不是函数的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  3. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  4. ruby-on-rails - 在 ruby​​ 中使用 gsub 函数替换单词 - 2

    我正在尝试用ruby​​中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案 啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了

  5. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  6. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  7. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

  8. ruby-on-rails - 错误 : Error installing pg: ERROR: Failed to build gem native extension - 2

    我克隆了一个rails仓库，我现在正尝试捆绑安装背景:OSXElCapitanruby2.2.3p173(2015-08-18修订版51636)[x86_64-darwin15]rails-v在您的Gemfile中列出的或native可用的任何gem源中找不到gem'pg(>=0)ruby​​'。运行bundleinstall以安装缺少的gem。bundleinstallFetchinggemmetadatafromhttps://rubygems.org/............Fetchingversionmetadatafromhttps://rubygems.org/...Fe

  9. ruby - ＃之间？ Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  10. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

随机推荐