javascript - 在 Google 中的 storeLocator.Store 上设置自定义商店标记

Question

我正在尝试为我的每个商店设置一个自定义标记。使用Google storelocator ，有一个storeLocator.Store使用 .setMarker 选项。

我尝试了很多

var store = new storeLocator.Store(store_id, position, storeFeatureSet, storeProps);
var markerPin = new google.maps.Marker(
  icon: 'http://url-to-marker.png'
});
store.setMarker(markerPin);

我一直在尝试在 Google 上查找一些内容，但 storelocator 项目上的信息并不多。

Answer 1

我设法找到了 GIT repository of the store locator project 。在此存储库中，有示例示例和演示标记位置的文件。如果您深入示例目录并查看文件 places.js 。您可以找到如何使用标记填充地点的代码。我添加了一个小代码片段，您可以查看整个项目的详细概述。

google.maps.event.addDomListener(window, 'load', function() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(-28, 135),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var panelDiv = document.getElementById('panel');

  var data = new PlacesDataSource(map);

  var view = new storeLocator.View(map, data);

  var markerSize = new google.maps.Size(24, 24);
  view.createMarker = function(store) {
    return new google.maps.Marker({
      position: store.getLocation(),
      icon: new google.maps.MarkerImage(store.getDetails().icon, null, null,
          null, markerSize)
    });
  };

  new storeLocator.Panel(panelDiv, {
    view: view
  });
});