마커가있는 알림 상자 Google지도 API

-1

나는 현재 chicagoMarker라는 마커를 가지고 있으며이를 위해 이벤트 리스너를 만들었습니다. 사용자가 내 도시에 더 가까워 질 때마다 경고 상자를 표시하는 데 문제가 있습니다.마커가있는 알림 상자 Google지도 API

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     var map; 
     var score; 
     score = 0; 
     function initMap() { 
     var chicago = {lat: 41.8781, lng: -87.6298}; 
     var indianapolis = {lat: 39.7684, lng: -86.1581}; 
     var oklahomaCity = {lat: 35.4819, lng: -97.5084}; 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 0.0, lng: 0.0}, 
      zoom: 1 
}); 
     var chicagoMarker = new google.maps.Marker({ 
      position: chicago, 


}); 

     var oklahomaCityMarker = new google.maps.Marker({ 
      position: oklahomaCity, 
}); 

     var indianapolisMarker = new google.maps.Marker({ 
      position: indianapolis, 

}); 

if (score==0) { 
    chicagoMarker.setMap(map); 
    map.getZoom(); 
    google.maps.event.addListener(chicagoMarker,'bounds_changed',function(){ 
     if (map.getBounds().contains(chicagoMarker)){ 
      alert("Good Job"); 
     } 
     if (zoom == 8 && map.getBounds.contains(chicagoMarker)){ 
      window.alert("You have found city 1!"); 
      score = score + 1; 
     } 
    }) 

}; 

if (score==1) { 
    oklahomaCityMarker.setMap(map) 
} 

if (score==2) { 
    indianapolisMarker.setMap(map) 
} 


chicagoMarker.setVisible(false); 
indianapolisMarker.setVisible(false); 
oklahomaCityMarker.setVisible(false); 
    } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuvsCAF0gVmwv6AF0SoA3xBjV66RG4r7o&callback=initMap" 
    async defer></script> 
    </body> 
</html>

출처

2016-11-11 Nate

당신은 전체 코드를 추가하시기 바랍니다 수보다 큰 경우 이제 도시는 발견? 이 코드에서만 어떤 일이 발생하는지 알 수 없습니다. – Ionut

당신은 google.maps.LatLng 인수로 위도 경도가 아닌 마커를 취하는 클래스의 .getPosition() (방법 contains() 누락하고 있기 때문에지도 마커가 포함되어 있는지 확인 할 수 없습니다 : 여기에 내가 무엇을 가지고)

그래서 줄을 변경

if (map.getBounds().contains(chicagoMarker)){ 

to 

if (map.getBounds().contains(chicagoMarker.getPosition())){

또한 사용할 수있는 뭔가

같은

69,452,당신이 조각에 결과를 찾을 수 있습니다, 당신의 스크립트 작업을하기 위해 몇 가지 변경 google.maps.event.addListener(chicagoMarker ...

대신에지도 (에 이벤트 리스너를 추가합니다. 줌은 10

var map; 
 
     var score; 
 
     score = 0; 
 
     function initMap() { 
 
     var chicago = {lat: 41.8781, lng: -87.6298}; 
 
     var indianapolis = {lat: 39.7684, lng: -86.1581}; 
 
     var oklahomaCity = {lat: 35.4819, lng: -97.5084}; 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: 0.0, lng: 0.0}, 
 
      zoom: 10 
 
}); 
 
     var chicagoMarker = new google.maps.Marker({ 
 
      position: chicago, 
 

 

 
}); 
 

 
     var oklahomaCityMarker = new google.maps.Marker({ 
 
      position: oklahomaCity, 
 
}); 
 

 
     var indianapolisMarker = new google.maps.Marker({ 
 
      position: indianapolis, 
 

 
}); 
 

 
if (score==0) { 
 
    chicagoMarker.setMap(map); 
 
    
 
    map.addListener('bounds_changed',function(){ 
 
     zoom = map.getZoom(); 
 
     console.log(zoom); 
 
     if (zoom >=10 && map.getBounds().contains(chicagoMarker.getPosition())){ 
 
      window.alert("You have found city 1!"); 
 
      score = score + 1; 
 
     } 
 
    }) 
 

 
}; 
 

 
if (score==1) { 
 
    oklahomaCityMarker.setMap(map) 
 
} 
 

 
if (score==2) { 
 
    indianapolisMarker.setMap(map) 
 
} 
 

 

 
chicagoMarker.setVisible(false); 
 
indianapolisMarker.setVisible(false); 
 
oklahomaCityMarker.setVisible(false); 
 
    }

#map { 
 
     height: 80%; 
 
     } 
 
    
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     }

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuvsCAF0gVmwv6AF0SoA3xBjV66RG4r7o&callback=initMap" 
 
    async defer></script> 
 
<div id="map"></div>

출처

2016-11-11 08:29:10 user2314737

가까이 오면 내 경고를받지 못합니다. 내 이벤트 리스너에 문제가 있습니까? – Nate

그래, if 함수를 바꿨지 만 여전히 운이 없다. – Nate

그래서 이벤트지도를 추가해야 어디에서지도를 초기화 할 수 있습니까? – Nate

마커가있는 알림 상자 Google지도 API

답변

관련 문제