使用Jmapping更改标记图标

Question

我正在使用jmapping插件来显示谷歌地图中的地点。如何更改所有图标的默认图标，我阅读了GM Api文档，但无法理解如何操作？

谢谢!另外，我没有任何代码生活在我的本地。

Answer 1

今天也遇到了同样的问题。我通过..。

 $(document).ready(function(){

   $('#map').jMapping({

    category_icon_options: function(category){

       if (category.match('your-cat-name')) {

              return new google.maps.MarkerImage('path to your image');

           } 


         }

    });

 });

可能不是最优雅的解决方案。我为每个点都有一个不同的图形，所以你可以离开它或根据类别名称扩展它。

Answer 2

在显示地图的页面上，将以下内容放入以开头的javascript地图代码中：

$('#map').jMapping({

您希望包含一个空白类别匹配图标选项行，如下所示

category_icon_options: {
  '': {color: '#E8413A'}

在StyledMarker.js中，找到以下代码行：

getURL: function(props){
  var _url;
  var starcolor_=props.get('starcolor');
  var text_=props.get('text');
  var color_=props.get('color').replace(/#/,'');
  var fore_=props.get('fore').replace(/#/,'');
  if (starcolor_) {
    _url = bu_ + 'd_map_xpin_letter&chld=pin_star|';
  } else {
    _url = bu_ + 'd_map_pin_letter&chld=';
  }

使用选项将单引号之间的最后一行更改为所需的图标代码。例如：

} else {
    _url = bu_ + 'd_map_xpin_icon&chld=pin_sleft|bank-dollar|52B552';
  }

这会给你一个带有美元符号的绿色记号。

Answer 3

我无法实现替代图标，但我可以使用此example更改颜色。

<div id="map"></div>

<div id="map-side-bar">
  <div class="map-location" data-jmapping="{id: 1, point: {lng: -122.2678847, lat: 37.8574888}, category: 'market'}">
    <a href="#" class="map-link">Berkeley Bowl</a>
    <div class="info-box">
      <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p>
    </div>
  </div>
  <div class="map-location" data-jmapping="{id: 2, point: {lng: -122.4391131, lat: 37.7729943}, category: 'restaurant'}">
    <a href="#" class="map-link">Nopalito</a>
    <div class="info-box">
      <p>The best authentic Mexican restaurant in San Francisco.</p>
    </div>
  </div>
  <div class="map-location" data-jmapping="{id: 3, point: {lng: -122.4481651, lat: 37.8042096}, category: 'museum'}">
    <a href="#" class="map-link">Exploratorium</a>
    <div class="info-box">
      <p>A hands-on museum of science, art, and human perception in San Francisco.</p>
    </div>
  </div>
</div>

以及相应的jquery调用：

$(document).ready(function(){
  $('#map').jMapping({
    category_icon_options: {
      'restaurant': {color: '#E8413A'},
      'museum': {color: '#465AE0'},
      'default': {color: '#7CDF65'}
    }
  });
});