Здесь API Maps установлен маркер - PullRequest
Новая
       36

Здесь API Maps установлен маркер

0 голосов
/ 25 февраля 2020

Я использую ЗДЕСЬ API Карты. Как добавить пользовательские значки для карты с кластеризацией и границами? Я знаю, как я могу это сделать, если у меня есть один маркер. Но как добавить значки, если у меня есть группа маркеров? Я думаю, что это должно быть где-то здесь ... 

// Set Map Bounds
function setMapBounds(map) {
  let svgMarkup = '<svg></svg>';
  let svgMarkup2 = '<svg width="24" height="24" ' +
  'xmlns="http://www.w3.org/2000/svg">' +
  '<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
  'height="22" /><text x="12" y="18" font-size="12pt" ' +
  'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
  'fill="white">H</text></svg>';
  let icon = new H.map.Icon(svgMarkup);
  let icon2 = new H.map.Icon(svgMarkup2);
  let mapBounds = [];
  let urlMapBounds = '/api/catalog/catalog/map/info';

  getDataAjax(urlMapBounds, toRequestJson).done((response) => {
    totalCount = response.count;
    numOfPages = Math.ceil(totalCount / PORTION);

    // Set Top-left and Bottom-right invisible bound markers 
    mapBounds.push(new H.map.Marker({lat: response.leftUp.lat, lng: response.leftUp.lng}, {icon: icon}));
    mapBounds.push(new H.map.Marker({lat: response.rightBottom.lat, lng: response.rightBottom.lng}, {icon: icon}));

    // Add bound markers to the group
    let group = new H.map.Group();
        group.addObjects(mapBounds);
        map.addObject(group);
  
    // Get geo bounding box for the group and set it to the map
    map.setViewBounds(group.getBounds());

    // Run function of getting data for clustering
    getDataForClustering(map)
  });
}

1 Ответ

1 голос
/ 26 февраля 2020

Посмотрите этот пример на портале developer , где вы можете сгруппировать несколько маркеров в функции, как показано ниже. 

var cubsIcon = new H.map.Icon(
    svgMarkup.replace('${FILL}', 'white').replace('${STROKE}', 'orange')),
    cubsMarker = new H.map.Marker({lat: 41.9483, lng: -87.6555 },
      {icon: cubsIcon});

  map.addObject(cubsMarker);
...