2017-03-14 6 views
-1

Google Maps APIを表示します。 私は、ズーム時にサイズ変更されないシンプルなドットアイコン(変更可能な色付き)を表示する最善の方法を探しています。特定のズームレベルまでドットを表示し、ヒートマップ

特定のレベルにズームすると、単純なドットアイコンが消え、各色の数値が表示された要約アイコンが表示されます。

私はマーカーアイコンを調べましたが、ズームでサイズを変更しました。 明確にする - マーカーは、実際の緯度と経度の測定値を参考にしてサイズが変更されます。マップ画面のサイズと同じサイズのままです。

私は、小さなドットが緯度と経度を基準にして同じサイズを維持する方法を探しています。私はサークルクラスを調べましたが、それらはマップ上の完全な円ではありません。彼らはエッジが粗い。 Zoomed In 2.ズームアウトのすべての方法で

1.Zoomed以下

写真 - 円は Zoomed Out 緯度と経度3Aを参照して、同じサイズをご利用いただけます。ズームアウト - サークルが消え、「サマリーサークル」が表示されます Zoomed Out Sum 3b。ズームアウト - 円が消えるとヒートマップは Zoomed Out Sum - HeatMap

新しいコードを表示されます私はあなたの質問を取得していない

<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> 
+0

マーカーはあなたが言っているのとまったく逆です。地図でサイズ変更されません**。どのズームレベルを使用していても、常に同じサイズになります。それがあなたが望むものでない場合は、[Circleクラス](https://developers.google.com/maps/documentation/javascript/reference#Circle)を使用できます。 – MrUpsidown

+0

明確にする - マーカーは実際の緯度と経度の測定値を参考にしてサイズが変更されます。 マップ画面のサイズと同じサイズのままです。 私は、小さなドットが緯度と経度を基準にして同じサイズを維持する方法を探しています。私はサークルクラスを調べましたが、マップ上にサークルではないようです。彼らは荒いエッジを持っています。 –

+0

あなたの質問は広すぎます。試したことを示し、コードを投稿し、問題を1つの問題に絞り込む必要があります。 'Circle' *は行く道になるかもしれない。 「マーカー」も。または両方。マーカーアイコンのサイズを変更できます。おそらく[Marker Clusterer](https://github.com/googlemaps/js-marker-clusterer)が必要になります。なぜ[ヒートマップ](https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap)を使用しないのですか。それはあなたが始めるのを助けるための十分なアイデアでなければなりません。 – MrUpsidown

答えて

0

を試してみました。しかし、あなたがダイナミックスタイリングをお探しの場合は、これはあなたを助けるかもしれません。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<title>Google Maps</title> 
<style type="text/css"> 
#map { 
    height: 100%; 
    width: 100%; 
} 
html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
</style> 
</head> 
<body> 
<div id="map"></div> 
<script> 
    var map = null; 
    var dataLayer = null; 
    function init() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center : { 
       lat : 12.931, 
       lng : 77.59180 
      }, 
      zoom : 1 
     }); 
     map.addListener('zoom_changed', zoomChange, this); 
     dataLayer = new google.maps.Data({ 
      map : map 
     }); 
     dataLayer.setStyle(styleFunction); 
     dataLayer.loadGeoJson('yourJsonFilePath.json'); 
    } 
    function styleFunction(feature) { 
     if (feature.getGeometry()) { 
      var fillColor = null; 
      var scale = null; 
      switch (map.getZoom()) { 
      case 0: 
      case 1: 
      case 2: 
      case 3: 
       fillColor = "#0000ff"; 
       scale = 40; 
       break; 
      case 4: 
      case 5: 
      case 6: 
      case 7: 
       fillColor = "#00ff00"; 
       scale = 30; 
       break; 
      case 8: 
      case 9: 
      case 10: 
      case 11: 
       fillColor = "#ff0000"; 
       scale = 20; 
       break; 
      case 12: 
      case 13: 
      case 14: 
      case 15: 
       fillColor = "#ff00ff"; 
       scale = 10; 
       break; 
      default: 
       fillColor = "#ffff00"; 
       scale = 5; 
      } 
      return { 
       icon : { 
        path : google.maps.SymbolPath.CIRCLE, 
        fillColor : fillColor, 
        fillOpacity : 1, 
        strokeWeight : 1, 
        strokeColor : fillColor, 
        scale : scale 
       } 
      } 
     } 
    } 

    function zoomChange(event) { 
     dataLayer.setStyle(styleFunction); 
    } 
</script> 
<script 
    src="https://maps.googleapis.com/maps/api/js?v=3.26&key=APIKey&callback=init"></script> 

代わりに、塗りつぶしの色をハードコーディングのスタイル機能でEDIT

あなたは以下のようにJSONデータを持っている場合は、機能プロパティからそれを得ることができます

function styleFunction(feature) { 
    if (feature.getGeometry()) { 
     var fillColor = feature.getProperty("color"); 
     var scale = null; 
     switch (map.getZoom()) { 
     case 0: 
     case 1: 
     case 2: 
     case 3: 
      scale = 40; 
      break; 
     case 4: 
     case 5: 
     case 6: 
     case 7: 
      scale = 30; 
      break; 
     case 8: 
     case 9: 
     case 10: 
     case 11: 
      scale = 20; 
      break; 
     case 12: 
     case 13: 
     case 14: 
     case 15: 
      scale = 10; 
      break; 
     default: 
      scale = 5; 
     } 
     return { 
      icon : { 
       path : google.maps.SymbolPath.CIRCLE, 
       fillColor : fillColor, 
       fillOpacity : 1, 
       strokeWeight : 1, 
       strokeColor : fillColor, 
       scale : scale 
      } 
     } 
    } 
} 

ここでは、各機能で

+0

アドバイスをいただきありがとうございます。私はこれを調べて、あなたに戻ってきます。 –

+0

[Marker Clustering](https://developers.google.com/maps/documentation/javascript/marker-clustering)を参照してください。興味があれば、それをチェックしてください。 –

+0

あなたのコードを見て、それは理にかなっています。唯一の問題は、アイコンの色がいくつかのJSONデータによって決まることです。ズーム時に変更するはずのアイコンはアイコンのスケールだけです。色だけではなくスケールを変える方法はありますか? –

関連する問題