2016-03-01 7 views
5

私のアプリケーションの1つにgoogle map "containsLocation()" APIを使用する予定です。ドキュメントのリンクは - https://goo.gl/4BFHCzGoogleマップエラー - a.lngは関数ではありません

私は同じ例に従っています。ここに私のコードです。

<!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変数を作成して表示された場合。私の問題はここではvar curPosition = e.latLng;と同じくらいうまくいきますが、それをvar curPosition = {"lat":12.9629277,"lng":77.7178972};に変更した瞬間、エラー"Uncaught TypeError: a.lng is not a function"が表示され始めました。

なぜ起こっているのか理解できませんか?どんな手掛かり...? containsLocation方法は(少なくとも現時点では) "点" としてgoogle.maps.LatLngを必要

取り付けCONSOLE.LOGスクリーンショット enter image description here

よろしく

+0

は、あなたがそこに持ってコンソールログを投稿するに役立つかもしれません。特にJSON.stringify(e.latLng) – user2263572

+2

** google.maps.LatLng **オブジェクトを渡してみてください: 'var curPosition = new google.maps.LatLng(12.9629277,777.78972); ' –

+0

@ user2263572:console.log添付 – mi6crazyheart

答えて

8

は、Googleを使用することはできません.maps.LatLngLiteral currentLocationthe documentation:

containsLocationから

(ポイント:緯度経度、ポリゴン:ポリゴン)|戻り値:boolean

指定された点が指定されたポリゴンの内側にあるかどうかを計算します。

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

+1

ええ、私は '' google.maps.LatLngLiteral'''は現在の場所を取得するために使用できないことを知っています。現在の場所を取得するために、私はいくつかの他のテクニックを使用します。しかし、私の要求は、特定の場所がそのポリゴンの中にあるかどうかを、どのように知るか、現在の場所を取得することです。 – mi6crazyheart

関連する問題