2016-03-01 23 views
5

Tôi đang lập kế hoạch sử dụng bản đồ google "containsLocation()" API trong một trong các ứng dụng của tôi. Liên kết doc là - https://goo.gl/4BFHCzLỗi bản đồ Google - a.lng không phải là chức năng

Tôi đang làm theo cùng một ví dụ. Đây là mã của tôi.

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

Nếu bạn thấy tôi đã tạo biến số curPosition chứa dữ liệu latLng. Vấn đề của tôi ở đây là miễn là var curPosition = e.latLng; nó hoạt động tốt nhưng, thời điểm tôi đã thay đổi thành var curPosition = {"lat":12.9629277,"lng":77.7178972}; nó bắt đầu hiển thị lỗi "Uncaught TypeError: a.lng is not a function".

Không thể hiểu tại sao nó xảy ra? Bất kỳ đầu mối ...?

màn hình console.log bắn gắn enter image description here

Trân

+0

Có thể giúp đỡ để gửi giao diện điều khiển các bản ghi mà bạn có trong đó. Đặc biệt là JSON.stringify (e.latLng) – user2263572

+2

Hãy thử truyền một đối tượng ** google.maps.LatLng **: 'var curPosition = new google.maps.LatLng (12.9629277, 77.7178972);' –

+0

@ user2263572: console.log ảnh chụp màn hình đính kèm – mi6crazyheart

Trả lời

8

phương pháp containsLocation đòi hỏi một google.maps.LatLng là "điểm" (ít nhất là hiện nay), bạn không thể sử dụng google .maps.LatLngLiteral cho currentLocation.

từ the documentation:

containsLocation (điểm: LatLng, đa giác: Polygon) | Giá trị trả lại: boolean

Tính toán liệu điểm đã cho nằm trong đa giác được chỉ định hay không.

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

đoạn mã:

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

Vâng, tôi biết '' 'google.maps.LatLngLiteral''' không thể được sử dụng để nhận vị trí hiện tại. Để có được vị trí hiện tại, tôi sẽ sử dụng một số kỹ thuật khác. Nhưng, yêu cầu của tôi là một khi tôi sẽ có được vị trí hiện tại như thế nào tôi sẽ biết rằng vị trí cụ thể là bên trong Polygon đó hay không. – mi6crazyheart

Các vấn đề liên quan