Может ли пользовательский значок карты заменить существующий? - PullRequest
0 голосов
/ 26 января 2019

Я пытаюсь отобразить маркер для привязки общедоступных переходов с помощью JavaScript API Карт Google. Anchor Public Taps находится прямо рядом с Anchor Brewing и управляется той же компанией. Оранжевый штифт Google с оранжевой меткой для Anchor Brewing обнаруживается при более широком увеличении, чем оранжевый штифт с оранжевой меткой для Anchor Public Taps.

Это проблема, потому что:

Если я добавлю собственный маркер, он не будет иметь метки. В документах я вижу способы добавления однобуквенной метки, метки, которая отображается при наведении, и всплывающего информационного окна, но ни одна из этих опций не похожа на оранжевую булавку Anchor Brewing, которая уже существует.

Если я добавлю пользовательский значок в качестве маркера, при увеличении автоматически отобразится и оранжевый значок Google с оранжевой булавкой, который находится в немного отличном от моего значка месте.

Это мой текущий код:

<script type="text/javascript">
  function initMap() {
    var tapsMap;
    var image = {
      url: '/assets/public_taps/navy_pt_map_icon.png',
      size: new google.maps.Size(90, 55),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(25, 10),
      scaledSize: new google.maps.Size(80, 45)
    };
    var tapsMapOptions = {
      center: {lat: 37.764044, lng: -122.401244},
      zoom: 17
    };
    var tapsMarker = new google.maps.Marker({
      position: {lat: 37.764044, lng: -122.401244},
      icon: image,
      title: 'Anchor Public Taps'
    });
    tapsMap = new google.maps.Map(document.getElementById('public-taps-map'), tapsMapOptions);
    tapsMarker.setMap(tapsMap);
  }
  initMap();
</script>

Есть ли способ, чтобы мой значок заменил автоматический штифт? Или есть способ скрыть вывод Anchor Brewing, который появляется автоматически, или заставить автоматический вывод Anchor Public Taps показывать при более широком увеличении?

Изображение увеличено на карте с двойными значками

Изображение начальной загрузки карты

1 Ответ

0 голосов
/ 27 января 2019

Вы можете скрыть все POI (название Google для их "автоматически помечены оранжевой булавкой").( ищите ТАК для «скрыть точки» ) Или вы можете просто скрыть бизнес-точки (к сожалению, вы не можете скрыть только один тип бизнес-точек):

var tapsMap = new google.maps.Map(document.getElementById('public-taps-map'), {
  center: {
    lat: 37.764044,
    lng: -122.401244
  },
  zoom: 17,
  styles: [{
    featureType: 'poi.business',
    stylers: [{
      visibility: 'off'
    }]
  }]
});

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

screenshot of resulting map

function initMap() {
  var tapsMap;
  var tapsMapOptions = {
    center: {
      lat: 37.764044,
      lng: -122.401244
    },
    zoom: 17,
    styles: [{
      featureType: 'poi.business',
      stylers: [{
        visibility: 'off'
      }]
    }]
  };
  var tapsMarker = new google.maps.Marker({
    position: {
      lat: 37.764044,
      lng: -122.401244
    },
    icon: {
      url: "https://i.stack.imgur.com/SlO4O.png",
      anchor: new google.maps.Point(62, 12), // anchor at the center of the icon
    },
    title: 'Anchor Public Taps'
  });
  tapsMap = new google.maps.Map(document.getElementById('public-taps-map'), tapsMapOptions);
  tapsMarker.setMap(tapsMap);
}
initMap();
html,
body,
#public-taps-map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="public-taps-map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&v=3"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...