Google지도에서 마우스 오버 폴리곤을 사용할 수 없음 - 잡히지 않는 참조 오류 : Google이 정의되지 않았습니다.

Question

다각형을 사용하는 Google지도 기능으로 코딩하고 응용 프로그램을 빌드하고 응용하려고합니다. 이 질문을 몇 번 본 적이 있지만 내 문제를 파악하지 못하는 것 같습니다. 지도가 초기화되고 정의 된 위치에서 다각형이 작성됩니다. "잡히지 않는 참조 오류 : google이 정의되지 않았습니다"라는 이벤트 리스너를 사용할 때 폴리곤이 호버에있을 때 스타일을 변경하려고합니다. 나는이 문제를 해결하려면 어떻게

Uncaught Reference Error: google is not defined 

: 어떤 이유

var map; 

// Map Display options 
function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 9, 
    center: {lat: 42.05, lng: -70.25}, 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
    }); 

    // Define the LatLng coordinates for the polygon. 
    var cc_peaked_hill = [ 
    {lat: 42.049803, lng: -69.970551}, 
    {lat: 42.048273, lng: -69.978790}, 
    {lat: 42.043684, lng: -70.046082}, 
    {lat: 42.043684, lng: -70.058441}, 
    {lat: 42.056940, lng: -70.085907}, 
    {lat: 42.070194, lng: -70.118179}, 
    {lat: 42.079369, lng: -70.156631}, 
    {lat: 42.049803, lng: -69.970551} 
    ]; 

    // Construct the polygon. 
    var cc_peaked_hill_billsPollygon = new google.maps.Polygon({ 
    paths: cc_peaked_hill, 
    strokeColor: '#F7F8FF', 
    strokeOpacity: 0.8, 
    strokeWeight: 1, 
    fillColor: '#4562A8', 
    fillOpacity: 0.45, 
    editable: false 
    }); 

    // Build the Polygons 
    polygons = cc_peaked_hill_billsPollygon.setMap(map); 

    //Listen for when the mouse hovers over the polygon. 
    google.maps.event.addListener(polygons, 'mouseover', function (event) { 
     // Within the event listener, "this" refers to the polygon which 
     // received the event. 
     this.setOptions({ 
      strokeColor: '#00ff00', 
      fillColor: '#00ff00' 
     }); 
    }); 

} 

, 나는 다음과 같은 오류는 무엇입니까?

Answer 1

문제는 당신이 먼저이 작업을 수행한다 : 정말 당신의 다각형에 map 속성을 설정하는 것입니다

polygons = cc_peaked_hill_billsPollygon.setMap(map); 

는 (사실 setMap 아무것도 반환하지 않습니다). 그것은 당신에게 다각형을주지 않습니다. 이미 변수가 cc_peaked_hill_billsPollygon입니다.

그래서 이벤트 리스너를 설정하려고 할 때 그냥 사용하십시오.

그리고 사실 setMap으로 전화 할 필요조차 없습니다. 다각형을 만들 때지도 속성을 지정하기 만하면됩니다.

// Construct the polygon. 
    var cc_peaked_hill_billsPollygon = new google.maps.Polygon({ 
    paths: cc_peaked_hill, 
    strokeColor: '#F7F8FF', 
    strokeOpacity: 0.8, 
    strokeWeight: 1, 
    fillColor: '#4562A8', 
    fillOpacity: 0.45, 
    editable: false, 
    map: map // Does the equivalent of `setMap(map)` 
    }); 

    //Listen for when the mouse hovers over the polygon. 
    google.maps.event.addListener(cc_peaked_hill_billsPollygon, 'mouseover', function (event) { 
     // Within the event listener, "this" refers to the polygon which 
     // received the event. 
     this.setOptions({ 
      strokeColor: '#00ff00', 
      fillColor: '#00ff00' 
     }); 
    }); 

추 신 : 이벤트 리스너를 추가 할 수있는 더 멋진 방법이 있습니다. 그냥 수행하십시오 :

cc_peaked_hill_billsPollygon.addListener('mouseover', function (event) { 
     // Within the event listener, "this" refers to the polygon which 
     // received the event. 
     this.setOptions({ 
      strokeColor: '#00ff00', 
      fillColor: '#00ff00' 
     }); 
    });