2017-02-03 4 views
-2

を軽減するたびに表示される4に等しい:ストロークは、私はズームして新しいマップを作成してどんどん大きく丸いアイコンスケールは

map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: new google.maps.LatLng(39.9526, -98.5795), 
    mapType: 'terrain' 
    }); 

私は新しいスケールで私のマーカーを再描画できるように、私はzoom_changedイベントをリッスン:

google.maps.event.addListener(map, 'zoom_changed', function() { 
    var zoom = map.getZoom(); 
    $log.debug("zoom: " + zoom); 

と私はここに私の新しいアイコンを作成:

var greenMarkerIcon = { 
    path: google.maps.SymbolPath.CIRCLE, 
    fillOpacity: 1, 
    fillColor: "green", 
     strokeWeight: 1, 
    scale: map.getZoom() 
    } 

を私がズームインすると、すべてが素敵に見えます。私が掘り下げていくと、アイコンは大きくなります。問題がどこにあるズームアウトするとされています

Click here for image of icon after reducing scale

円の境界線はますます大きくなっています。 icon.strokeWeightプロパティのデバッグ文を追加しましたが、それは1つの時間全体に残ります。私はすべての古いマーカーを吹き飛ばして再描画しているので、なぜ単一のマーカーストロークが大きくなっているのか分かりません。

アイデア?

+0

問題を示す[mcve]を入力してください。 – geocodezip

+0

質問にアイコンのサイズを変更するコードが表示されない(またはストロークが効く)あなたはアイコンを変更していて、新しいアイコンで上書きするだけではありません(新しいものが大きければ小さいものを見ることはできません)。 – geocodezip

答えて

1

マップズームでマーカーアイコンのスケールを変更し、ストロークを変更せずにマーカーを小さく/大きくする必要があるとします。次に、あなただけのアイコンスケールを変更し、マーカーに設定する必要があります。

google.maps.event.addListener(map, 'zoom_changed', function() { 
    var zoom = map.getZoom(); 
    console.log("zoom: " + zoom); 
    greenMarkerIcon.scale = (zoom + 1) * scale; // +1 is for avoiding zoom=0, scale is initial scale of icon 
    marker.setIcon(greenMarkerIcon); 
}); 

チェックこの例:http://jsfiddle.net/dUMFW/108/

0

提供答えが正解です。

私が間違っていたことがわかりました。ユーザーがズームボタンをクリックするたびに新しいマーカーを作成していました。マーカーは一度だけ作成し、関連するアイコンはズーム時に変更する必要があります。

ありがとうございました。

関連する問題