All geek questions in one place

Google map error - a.lng is not a function

I plan to use the google map "containsLocation ()" API in one of my applications. Link doc - https://goo.gl/4BFHCz

I follow the same example. Here is my code.

<!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>

If you see that I created a variable curPosition that contains latLng data. My problem here is as long as var curPosition = e.latLng; works fine, but the moment I changed it to var curPosition = {"lat":12.9629277,"lng":77.7178972}; , he began to show the error "Uncaught TypeError: a.lng is not a function" .

Can't understand why this is happening? Any clue ...?

Console.log screenshot included enter image description here

Hello

+5
source share
1 answer

The containsLocation method requires google.maps.LatLng as a "dot" (at least for the time being), you cannot use google.maps.LatLngLiteral for currentLocation .

from the documentation:

containsLocation (dot: LatLng , polygon: polygon) | Return Value: boolean

Calculates whether the given point is inside the specified polygon.

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

code snippet:

 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"></script> <div id="map"></div>
+8
source

Source: https://habr.com/ru/post/1244224/

More articles:


All Articles