Question

我正在Google地图上创建标记图层，然后添加图钉。这些被添加到该层。我想添加一个悬停效果，它基本上是针脚后面的圆圈。

我打算只使用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的引用。

我唯一的问题是在#markerLayer div中搜索图像并存储它们，假设它们的显示顺序与添加到_.markers属性的顺序相同。

或者更好的方法是使用API创建一个Circle并将其放置在与pin相同的位置？

Answer 1

当我将鼠标悬停在标记上时，我使用了Google地图圆圈来创建圆形。

这是doc的链接：（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>

Google Maps API，将悬停状态添加到引脚

1 个答案: