使用jQuery Store Locator Plugin以编程方式选择标记

时间:2017-03-31 13:25:07

标签: javascript jquery google-maps google-maps-api-3

我正在尝试使用jQuery Store Locator Plugin以编程方式在地图上选择标记。

我有一个jQuery点击事件,应该触发标记选择。

// Init
$('#bh-sl-map-container').storeLocator({ //settings })

$('.select-head-office').click(function() {
  // Here I'd like to select a specific marker, 
  // Ideally, select a marker from a unique category. Ex: Head office
});

该插件的方法是changeSelectedMarker(),不确定我是否可以用它来解决我的问题。

1 个答案:

答案 0 :(得分:0)

我终于找到了解决方案。这有点hackish但它运作良好。

首先,我意识到我可以使用位置列表来获取标记ID,并将它们与位置类别相关联。

<li data-markerid="{{markerid}}" data-marker-category="{{category}}">

然后,使用jQuery,我选择获取具有“head-office”类别的位置的markerId。 (理想情况下,一个独特的类别)

$('*[data-marker-category='head-office']').data('markerid');

我创建了一个自定义方法来平移到所选标记。

selectMarker: function(markerId) {
 var _this = this;
 var map = _this.map;
 var infowindow = _this.infowindow;
 var storeStart = _this.storeStart;
 var page = _this.page;
 var selectedMarker = markers[markerId];

 map.panTo(selectedMarker.getPosition());
 if (_this.settings.bounceMarker === true) {
  selectedMarker.setAnimation(google.maps.Animation.BOUNCE);
  setTimeout(function () {
    selectedMarker.setAnimation(null);
  }, 1200);
 }
}

最后,我用我之前得到的markerid变量调用我的方法。

storeLocator = $map_container.data('plugin_storeLocator');
storeLocator.selectMarker(activeMarkerID);