Google Maps APIを表示します。 私は、ズーム時にサイズ変更されないシンプルなドットアイコン(変更可能な色付き)を表示する最善の方法を探しています。特定のズームレベルまでドットを表示し、ヒートマップ
特定のレベルにズームすると、単純なドットアイコンが消え、各色の数値が表示された要約アイコンが表示されます。
私はマーカーアイコンを調べましたが、ズームでサイズを変更しました。 明確にする - マーカーは、実際の緯度と経度の測定値を参考にしてサイズが変更されます。マップ画面のサイズと同じサイズのままです。
私は、小さなドットが緯度と経度を基準にして同じサイズを維持する方法を探しています。私はサークルクラスを調べましたが、それらはマップ上の完全な円ではありません。彼らはエッジが粗い。 2.ズームアウトのすべての方法で
1.Zoomed以下
写真 - 円は 緯度と経度3Aを参照して、同じサイズをご利用いただけます。ズームアウト - サークルが消え、「サマリーサークル」が表示されます
3b。ズームアウト - 円が消えるとヒートマップは
新しいコードを表示されます私はあなたの質問を取得していない
<script type="text/javascript">
var map = null;
var spotsArray = [];
window.onload = initialize();
function initialize() {
map = new google.maps.Map(document.getElementById("map-canvas")
, {
mapTypeId: google.maps.MapTypeId.roadmap
, zoom: @Model.StartingZoom
, disableDefaultUI: true
, zoomControl: true
, center: new google.maps.LatLng(@Model.StartingLocation)
});
map.addListener('zoom_changed', zoomChange, this);
dataLayer = new google.maps.Data({
map: map
});
window.setInterval(function() { UpdateData() }, 5000);
}
function getScaleSize() {
var scale = null;
var mapZoom = map.getZoom();
switch (mapZoom) {
case 15:
case 16:
case 17:
scale = 1;
break;
case 18:
scale = 10;
break;
case 19:
case 20:
case 21:
case 22:
scale = 20;
break;
default:
scale = 0;
}
return scale;
}
function zoomChange() {
for (var nIndex = 0; nIndex < spotsArray.length; nIndex++) {
var Spot = spotsArray[nIndex].Spot;
var Scale = getScaleSize();
Spot.icon.scale = Scale;
}
}
function UpdateData() {
GetJsonData('@Url.Action("GetMapData")'
,{}
,function(jsonData)
{
$(jsonData).each(function (item)
{ AddUpdateSpotOnMap(jsonData[item]) });
});
};
function AddUpdateSpotOnMap(SpotData) {
//SpotID, Latitude, Longitude, StrokeColor, StrokeOpacity, StrokeWeight, FillColor, FillOpacity
//Check if in Array
var inArrayIndex = NaN;
for (var nIndex = 0; nIndex < spotsArray.length; nIndex++) {
if (SpotData.spotID == spotsArray[nIndex].SpotID) {
inArrayIndex = nIndex;
break;
}
}
if (isNaN(inArrayIndex) == false) {
//Update Color
spotsArray[inArrayIndex].Spot.setOptions({ StrokeColor: SpotData.strokeColor, StrokeOpacity: SpotData.strokeOpacity, StrokeWeight: SpotData.strokeWeight, FillColor: SpotData.fillColor, FillOpacity: SpotData.fillOpacity });
}
else {
var Spot = new google.maps.Marker(
{
position: new google.maps.LatLng(SpotData.latitude, SpotData.longitude),
map: map,
title: SpotData.hoverOver,
icon: {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: SpotData.strokeColor,
strokeOpacity: SpotData.strokeOpacity,
strokeWeight: SpotData.strokeWeight,
fillColor: SpotData.fillColor,
fillOpacity: SpotData.fillOpacity,
scale: 5 }
});
spotsArray.push({ SpotID: SpotData.spotID, Spot: Spot });
dataLayer.add(Spot);
}
};
</script>
マーカーはあなたが言っているのとまったく逆です。地図でサイズ変更されません**。どのズームレベルを使用していても、常に同じサイズになります。それがあなたが望むものでない場合は、[Circleクラス](https://developers.google.com/maps/documentation/javascript/reference#Circle)を使用できます。 – MrUpsidown
明確にする - マーカーは実際の緯度と経度の測定値を参考にしてサイズが変更されます。 マップ画面のサイズと同じサイズのままです。 私は、小さなドットが緯度と経度を基準にして同じサイズを維持する方法を探しています。私はサークルクラスを調べましたが、マップ上にサークルではないようです。彼らは荒いエッジを持っています。 –
あなたの質問は広すぎます。試したことを示し、コードを投稿し、問題を1つの問題に絞り込む必要があります。 'Circle' *は行く道になるかもしれない。 「マーカー」も。または両方。マーカーアイコンのサイズを変更できます。おそらく[Marker Clusterer](https://github.com/googlemaps/js-marker-clusterer)が必要になります。なぜ[ヒートマップ](https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap)を使用しないのですか。それはあなたが始めるのを助けるための十分なアイデアでなければなりません。 – MrUpsidown