Google지도 API, 핀에 호버 상태 추가

-1

내 Google지도에서 마커 레이어를 만들고 핀을 추가하고 있습니다. 이것들은이 레이어에 추가됩니다. 기본적으로 핀 뒤에 원이있는 호버 효과를 추가하고 싶습니다.Google지도 API, 핀에 호버 상태 추가

CSS를 사용하려고했지만 이미지에 before 또는 after을 추가 할 수 없으므로 부모 요소를 가져와 추가해야합니다. 그러나 Google Maps API는 Pin 요소에 대한 액세스 권한을 부여하지 않습니다. 다음은

var markerLayer = new google.maps.OverlayView(); 
markerLayer.draw = function() { 
     this.getPanes().markerLayer.id='markerLayer'; 
}; 
markerLayer.setMap(_.map); 

// Create pin and store it 
var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(location.lat, location.lng), 
    icon: marker, 
    title: location.name, 
    optimized: false 
}); 
_.markers.push(marker);

는 marker 객체에 포함 된 내용의 스크린 샷, 그리고 당신이 볼 수로는 HTMLElement에 대한 참조가 없습니다.

내에서만 비록 그들이 _.markers 속성에 추가로 이러한 동일한 순서로 나타납니다 가정, 이미지를 저장하기위한 #markerLayer DIV를 검색하는 것이 었습니다.

또는 API를 사용하여 원을 만들고 핀과 동일한 위치에 두는 것이 더 나은 방법일까요?

출처

2017-10-02 Martyn Ball

마커로 이동하면 Google지도 서클을 사용하여 서클 모양을 만들었습니다. (https://developers.google.com/maps/documentation/javascript/examples/circle-simple)

확인이 addMarker 기능

function addMarker(position) { 
    var marker = new google.maps.Marker({ 
     position: position, 
     map: map 
    }); 

    var markerCircle = new google.maps.Circle({ 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     center: position, 
     radius: 500000 
    }); 

    circles.push(markerCircle); 
    markers.push(marker); 

    marker.addListener('mouseover', function() { 
     var index = markers.indexOf(marker); 
     circles[index].setMap(map); 
    }); 

    marker.addListener('mouseout', function(){ 
     var index = markers.indexOf(marker); 
     circles[index].setMap(null); 
    }); 

    return marker; 
}

나는 간단한 응용 프로그램을 만든지도를 클릭하여 마커를 추가 할 것 : 여기

는 문서에 대한 링크입니다.

확인이 작업 예 : http://jsbin.com/nukecog/2/edit?html,js,output

var map; 
 
var markers = []; 
 
var circles = []; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 2, 
 
    center: { 
 
     lat: 0, 
 
     lng: 0 
 
    } 
 
    }); 
 

 
    map.addListener('click', function(e) { 
 
    addMarker(e.latLng); 
 
    }); 
 
} 
 

 
function addMarker(position) { 
 
    var marker = new google.maps.Marker({ 
 
    position: position, 
 
    map: map 
 
    }); 
 

 

 
    var markerCircle = new google.maps.Circle({ 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 2, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35, 
 
    center: position, 
 
    radius: 500000 
 
    }); 
 

 
    circles.push(markerCircle); 
 
    markers.push(marker); 
 

 
    marker.addListener('mouseover', function() { 
 
    var index = markers.indexOf(marker); 
 
    circles[index].setMap(map); 
 
    }); 
 

 
    marker.addListener('mouseout', function() { 
 
    var index = markers.indexOf(marker); 
 
    circles[index].setMap(null); 
 
    }); 
 

 
    return marker; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    #map { 
 
     height: 400px; 
 
     width: 100%; 
 
    } 
 
    </style> 
 
</head> 
 

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

 
</html>

을

출처

2017-10-03 07:01:31

Google지도 API, 핀에 호버 상태 추가

답변

관련 문제