Google Maps API、ピンにホバー状態を追加

-1

私はGoogleマップでマーカーレイヤーを作成してからピンを追加しています。これらはこのレイヤーに追加されます。私は基本的にピンの後ろにある円であるホバー効果を追加したい。Google Maps 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);

オブジェクトが含まれているもののスクリーンショットで、あなたが見ることができるように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; 
}

私はシンプルなアプリを作った、マップをクリックしてマーカーを追加します。ここで

は、docへのリンクです。

この作業例を確認：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 Maps API、ピンにホバー状態を追加

答えて

関連する問題