2016-03-01 21 views
5

Ho intenzione di utilizzare l'API "containsLocation()" di google map in una delle mie applicazioni. Il collegamento doc è - https://goo.gl/4BFHCzErrore mappa Google - a.lng non è una funzione

Sto seguendo lo stesso esempio. Ecco il mio codice.

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

Se si vede che ho creato una variabile curPosition che contiene i dati LatLng. Il mio problema qui è finchè var curPosition = e.latLng; funziona bene ma, nel momento in cui l'ho cambiato in var curPosition = {"lat":12.9629277,"lng":77.7178972};, si è iniziato a mostrare l'errore "Uncaught TypeError: a.lng is not a function".

Non riesco a capire perché sta accadendo? Qualche idea ...?

schermo console.log colpo allegato enter image description here

saluti

+0

potrebbe aiutare a inviare i log della console che avete in là. Soprattutto JSON.stringify (e.latLng) – user2263572

+2

Prova a passare un oggetto ** google.maps.LatLng **: 'var curPosition = new google.maps.LatLng (12.9629277, 77.7178972);' –

+0

@ user2263572: screenshot di console.log allegato – mi6crazyheart

risposta

8

il metodo containsLocation richiede un google.maps.LatLng come il "punto" (almeno attualmente), non è possibile utilizzare un Google .maps.LatLngLiteral per currentLocation.

da the documentation:

containsLocation (punto: LatLng, poligono: Poligono) | Valore restituito: booleano

Calcola se il punto specificato si trova all'interno del poligono specificato.

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

frammento di codice:

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>

+1

Sì, so che '' 'google.maps.LatLngLiteral''' non può essere utilizzato per ottenere la posizione corrente. Per ottenere la posizione corrente userò qualche altra tecnica. Ma, il mio requisito era una volta che avrò la posizione corrente come saprò che la particolare posizione si trova all'interno di quel poligono oppure no. – mi6crazyheart