谷歌地图 javascript api 动态标记（颜色）答案

【问题标题】：google maps javascript api dynamic markers (color)谷歌地图 javascript api 动态标记（颜色）
【发布时间】：2014-03-01 02:14:09
【问题描述】：

您能否看一下下面的代码，并根据 json 文件中的数据值 -dustppm 变量给我建议为标记圆圈着色？我想根据数据范围更改圆形标记的颜色 - 例如 0-50 = 蓝色和 51-100 = 绿色。谢谢。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dust Station Map</title>

<style>
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  #map_canvas {
    width: 100%;
    height: 100%;
  }
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

<script>
  // The web service URL from Drive 'Deploy as web app' dialog.
  var DATA_SERVICE_URL = "https://script.google.com/macros/s/AKfycbwDTcoL4tZ9rBo9BZGHScLnu-32F7RvFJUX8wtOVr-AfwRuTbw/exec?jsonp=callback";

  //var map;

  function initialize() {
    this.map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: new google.maps.LatLng(37.0, 126.8),
      zoom: 7,
      maxZoom: 20,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    //var weatherLayer = new google.maps.weather.WeatherLayer({
    //    temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
    //});
    //weatherLayer.setMap(map);
    //var cloudLayer = new google.maps.weather.CloudLayer();
    //cloudLayer.setMap(map);

    var scriptElement = document.createElement('script');
    scriptElement.src = DATA_SERVICE_URL;
    document.getElementsByTagName('head')[0].appendChild(scriptElement);
  }

    function callback(data) {
    for (var i = 0; i < data.length; i++) {
      var station = data[i][0];
      var location = new google.maps.LatLng(data[i][1], data[i][2]);
      var dustppm = data[i][3];
      addMarker(map, station, location, dustppm);
      } 
    }

var vCircle = getCircle1;


   function addMarker(map, station, location, dustppm) {   


var marker = new google.maps.Marker({
        position: location,
        map: map,
        title: 'Station: ' + station,
        icon: vCircle(dustppm)
      });


      var infowindow = new google.maps.InfoWindow({
      content: station + ' ppm:' + dustppm
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
      });

    } 

    function getCircle1(dustppm) {
        return {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: 'red',
        fillOpacity: .4,
        scale: dustppm *.2,
        strokeColor: 'white',
        strokeWeight: .5
        };
    }
function getCircle2(dustppm) {
        return {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: 'green',
        fillOpacity: .4,
        scale: dustppm *.2,
        strokeColor: 'white',
        strokeWeight: .5
        };
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="map_canvas"></div>
<script>
$(document).ready(onload);
</script>
</body>
</html>

【问题讨论】：

标签： google-maps-api-3

【解决方案1】：

可能的解决方案：

function getCircle1(dustppm) {

    //custom colors
  var colors={50:'blue',100:'green'},

    //default-color
      color='red';

    for(var k in  colors){
      if(dustppm<=k){
         color=colors[k];
         break;
      }
    }

    return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: color,
    fillOpacity: .4,
    scale: dustppm *.2,
    strokeColor: 'white',
    strokeWeight: .5
    };
}

【讨论】：

完美运行！非常感谢。现在我只需要弄清楚为什么在我刷新页面 3 次之前标记不会加载。再次感谢。