ジヤップを使ってマーカーアイコンを変更する

Question

Googleマップの場所を表示するためにjmappingプラグインを使用しています。どのようにすべてのアイコンのデフォルトのアイコンを変更するには、私はGMのAPIのドキュメントを読んだが、それを行う方法を理解できないのですか？

ありがとうございます！ PS私のローカルにはコードはありません。

Answer 1

代替アイコンを達成できませんでしたが、この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'} 
    } 
    }); 
}); 

Answer 2

は、今日、この同じ問題を抱えていました。私は...

$(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 3

で始まり、あなたの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='; 
    } 

変更最後の林をオプションを使って、あなたの望むアイコンコードへの一重引用符の間のe。例：

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

これは、ドル記号付きの緑色のマーカーになります。