Google Maps API V3: исключить одиночный маркер из кластеризации

Я использую API карт Google и кластеризацию сетки для маркеров. Я хотел знать, есть ли способ исключить один маркер из кластеризации. Мне нужен маркер «Вы здесь», который всегда виден. Я попытался использовать другой массив только для этого маркера и не включать его в функцию кластера, но это не сработало.

У кого-нибудь есть решение для этого?

Вот как я делаю кластеризацию

$(document).on('click', '#mapbut', function() {

var items, distances, you_are_here = [], markers_data = [], markers_data2 = [], fred, clust1, markss;

  you_are_here.push({
      lat : Geo.lat,
      lng : Geo .lng,
      animation: google.maps.Animation.DROP,
      title : 'Your are here',
      icon: {
  path: google.maps.SymbolPath.CIRCLE,
  scale: 10
},
infoWindow: {
  content: '<p>You are Here</p>'
}
});

function loadResults (data) {

    if (data.map.length > 0) {
        items = data.map;

        for (var i = 0; i < items.length; i++)
        {
            var item = items[i];
            var distances = [];
            var dist2;

            if (item.Lat != undefined && item.Lng != undefined)
            {

                markers_data.push({
                  lat : item.Lat,
                  lng : item.Lng,
                  title : item.Site,
                        infoWindow: {
                          content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>'
                             }
                 });

             }
        }
    }


  map.addMarkers(markers_data);

  map = new GMaps({
       el: '#map',
       lat: Geo.lat,
       lng: Geo.lng,
       zoom: 10,
       mapTypeControl: false,
       zoomControl: true,
       zoomControlOptions: {
   position: google.maps.ControlPosition.LEFT_CENTER
       },
       markerClusterer: function(map) {
      options = {
        gridSize: 50
      }

    clust1 = new MarkerClusterer(map,[], options);
    return clust1;
  },

       scaleControl: true,
       streetViewControl: false

});

map.addMarkers(you_are_here);

google-maps javascript google-maps-api-3 markerclusterer
person bos570    schedule 15.01.2016    source источник
comment
Как вы создаете свои кластеры? Не должно быть слишком сложно добавить все ваши маркеры в кластер, а затем добавить новый маркер на карту. Но не видя вашего кода, трудно сказать, как исправить то, что вы делаете.   -  person duncan    schedule 15.01.2016
comment
@duncan Я добавил код. Но даже если я добавлю маркер после того, как он будет втянут в кластер.   -  person bos570    schedule 15.01.2016
comment
Куда вы добавляете отдельный маркер, который не должен группироваться? Предоставьте минимальный, полный, проверенный и удобочитаемый пример, демонстрирующий проблему.   -  person geocodezip    schedule 15.01.2016
comment
@geocodezip Добавлен полный код для добавления маркеров.   -  person bos570    schedule 15.01.2016
comment
Я запутался - вы звоните map.addMarkers до того, как создали map   -  person duncan    schedule 15.01.2016
comment
Добавленный вами код не является минимальным, полным, проверенным и удобочитаемым примером: Uncaught ReferenceError: Geo is not defined. Вы проверили это?   -  person geocodezip    schedule 15.01.2016

Ответы (2)


arrow_upward
3
arrow_downward

GMaps кластеризует все маркеры, которые вы добавляете к нему с помощью метода addMarker (если вы предоставляете MarkerClusterer).

Один из вариантов: добавить свой "особый" маркер (тот, который вы не хотите кластеризовать) на карту вручную, чтобы он не добавлялся в MarkerClusterer:

Свойство GMaps.map является ссылкой на объект карты Google Maps Javascript API v3. Таким образом, это добавит маркер на карту, не сообщая об этом библиотеке GMaps:

  you_are_here = new google.maps.Marker({
    position: {lat: Geo.lat,lng: Geo.lng},
    animation: google.maps.Animation.DROP,
    title: 'Your are here',
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    map: map.map
  });

доказательство концепции скрипки

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

var Geo = {
  lat: 40.7281575,
  lng: -74.07764
};
$(document).on('click', '#mapbut', function() {

  var items, distances, you_are_here = [],
    markers_data = [],
    markers_data2 = [],
    fred, clust1, markss;

  function loadResults(data) {

    if (data.map.length > 0) {
      items = data.map;

      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        var distances = [];
        var dist2;

        if (item.Lat != undefined && item.Lng != undefined) {

          markers_data.push({
            lat: item.Lat,
            lng: item.Lng,
            title: item.Site,
            infoWindow: {
              content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>'
            }
          });

        }
      }
    }
    map = new GMaps({
      el: '#map',
      lat: Geo.lat,
      lng: Geo.lng,
      zoom: 8,
      mapTypeControl: false,
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
      },
      markerClusterer: function(map) {
        options = {
          gridSize: 50,
          imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
        }

        clust1 = new MarkerClusterer(map, [], options);
        return clust1;
      },

      scaleControl: true,
      streetViewControl: false

    });
    map.addMarkers(markers_data);

    you_are_here = new google.maps.Marker({
      position: {
        lat: Geo.lat,
        lng: Geo.lng
      },
      animation: google.maps.Animation.DROP,
      title: 'Your are here',
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 10
      },
      infoWindow: {
        content: '<p>You are Here</p>'
      },
      map: map.map
    });

    // map.addMarkers(you_are_here);
  }
  loadResults(data);
});
var data = {
  map: [{
    Lat: 40.7127837,
    Lng: -74.005941,
    Site: "New York, NY",
    distance: 1
  }, {
    Site: "Newark, NJ",
    Lat: 40.735657,
    Lng: -74.1723667,
    distance: 2
  }]
};
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<input id="mapbut" type="button" value="map" />
<div id="map"></div>

person geocodezip    schedule 15.01.2016

arrow_upward
0
arrow_downward

Обойти это относительно просто: сразу после отправки массива маркеров в MarkerClusterer я добавляю свое местоположение.

// Setup cluster markers
var markerCluster = new MarkerClusterer( gmap.map, options )

// add my location    
gmap.addMarker({
      lat: data.latitude,
      lng: data.longitude
      ...
    })

Спасибо

person wilfredonoyola    schedule 04.01.2017