Как нарисовать круг вместо маркера? - PullRequest
Новая
       14

Как нарисовать круг вместо маркера?

0 голосов
/ 20 мая 2019

Я использую следующее и отлично работает: 

      var markers = [],
          markerCluster;

      for (var i = 0; i < coords.length; i++) {
        var pin = coords[i].split(',');
        var latLng = new google.maps.LatLng(pin[0],
            pin[1]);
        (function() {
          var marker = new google.maps.Marker({
            position: latLng
          }),
          circle = new google.maps.Circle({
            radius: 30.48,
            fillColor: '#ff007f',
            strokeColor: '#ff007f',
            strokeOpacity: 0.75,
            strokeWeight: 20
          });
          circle.bindTo('center', marker, 'position');
          circle.bindTo('map', marker, 'map');
          markers.push(marker);
        })();
      };
      markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
      });

Однако он все еще рисует булавку, а я только смотрю на показ круга

1 Ответ

0 голосов
/ 20 мая 2019

MarkerClusterer управляет только google.maps.Marker объектами.

Одним из вариантов будет изменение этого источника для управления google.maps.Circle объектов.

Однако, возможно, проще всего сделать значки для существующих маркеров прозрачным PNG размером 1 пиксель, а затем позволить MarkerClusterer управлять маркерами (которые связаны с соответствующими кругами). 

var marker = new google.maps.Marker({
      position: latLng,
      // 1x1 transparent PNG data URL
      icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
    }),

подтверждение концепции скрипта

screenshot of resulting map zoomed in on two

фрагмент кода: 

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: -28.024,
      lng: 140.887
    }
  });

  var markers = [],
    markerCluster;

  for (var i = 0; i < coords.length; i++) {
    var pin = coords[i].split(',');
    var latLng = new google.maps.LatLng(pin[0],
      pin[1]);
    (function() {
      var marker = new google.maps.Marker({
          position: latLng,
          icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
        }),
        circle = new google.maps.Circle({
          radius: 30.48,
          fillColor: '#ff007f',
          strokeColor: '#ff007f',
          strokeOpacity: 0.75,
          strokeWeight: 20
        });
      circle.bindTo('center', marker, 'position');
      circle.bindTo('map', marker, 'map');
      markers.push(marker);
    })();
  };
  markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
  });

}
var coords = [
  "-31.563910, 147.154312",
  "-33.718234, 150.363181",
  "-33.727111, 150.371124",
  "-33.848588, 151.209834",
  "-33.851702, 151.216968",
  "-34.671264, 150.863657",
  "-35.304724, 148.662905",
  "-36.817685, 175.699196",
  "-36.828611, 175.790222",
  "-37.750000, 145.116667",
  "-37.759859, 145.128708",
  "-37.765015, 145.133858",
  "-37.770104, 145.143299",
  "-37.773700, 145.145187",
  "-37.774785, 145.137978",
  "-37.819616, 144.968119",
  "-38.330766, 144.695692",
  "-39.927193, 175.053218",
  "-41.330162, 174.865694",
  "-42.734358, 147.439506",
  "-42.734358, 147.501315",
  "-42.735258, 147.438000",
  "-43.999792, 170.463352"
]
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
...