2014-10-07 6 views
1

Мне было предъявлено следующее требование. нужно построить погоды для отдельных крупных городов в КанадеAmmaps - Мои собственные изображения нужно добавлять, в частности, широту и долготу

Я могу получить текущие сведения о погоде из API в Интернете через (обработчик и запросы строки веб.) Таким образом, у меня есть широта и долгота деталь под рукой вдоль с погодным условием (облачный, солнечный, дождливый и т. д.)

Мне просто нужно показать облака в городе, где облачно, Дождливое изображение в городе, где идет дождь и т. д. Это должно быть сделано в Javascript AMmaps. Мой полный код наклеивается below.I не найти способ подтолкнуть свои собственные изображения на карте

AmCharts.ready(function() { 
     map = new AmCharts.AmMap(); 
     map.pathToImages = "http://www.amcharts.com/lib/3/images/"; 
     map.panEventsEnabled = true; 
     map.backgroundColor = "#666666"; 
     map.backgroundAlpha = 1; 
     colorSteps: 1, 
     map.zoomControl.panControlEnabled = true; 
     map.zoomControl.zoomControlEnabled = true; 

     var dataProvider = { 
      map: "canadaLow", 
      getAreasFromMap: true, 
      areas: [{ 
       id: "CA-AB", value: 3645257 
      }, 
{ 
    id: "CA-BC", value: 4400057 
}, 

{ 
    id: "CA-MB", value: 1208268 
}, 
{ 
    id: "CA-NB", value: 751171 
}, 
{ 
    id: "CA-NL", value: 514536 
}, 
{ 
    id: "CA-NS", value: 921727 
}, 
{ 
    id: "CA-NT", value: 41462 
}, 
{ 
    id: "CA-NU", value: 31906 
}, 
{ 
    id: "CA-ON", value: 12851821 
}, 
{ 
    id: "CA-PE", value: 140204 
}, 
{ 
    id: "CA-QC", value: 7903001 
}, 
{ 
    id: "CA-SK", value: 1033381 
}, 
{ 
    id: "CA-YT", value: 33897 
}], 
      images: [{ latitude: 45.532, longitude: -73.79, balloonText: "T3695", type: "circle", scale: 0.3 }, 
{ latitude: 43.7143, longitude: -79.7235, balloonText: "T3623", type: "circle", scale: 0.3 }, 
{ latitude: 45.5925, longitude: -73.5418, balloonText: "T3705", type: "circle", scale: 0.3 }, 
{ latitude: 43.4136, longitude: -79.7052, balloonText: "T3670", type: "circle", scale: 0.3 }, 
{ latitude: 51.0195, longitude: -114.1716, balloonText: "T3754", type: "circle", scale: 0.3 }, 
{ latitude: 45.7922, longitude: -74.0177, balloonText: "T3657", type: "circle", scale: 0.3 }, 
{ latitude: 42.3974, longitude: -82.2122, balloonText: "T3533", type: "circle", scale: 0.3 }], 
      // zoomLevel: 3.37137, // insert the values... 
         //zoomLatitude: 52.124368, // from the alert box... 
      //zoomLongitude: -96.251201,// here 

     }; 

     map.dataProvider = dataProvider; 
     map.objectList = { 
      container: "listdiv" 
     }; 
     map.areasSettings = { 
      autoZoom: false, 
      color: "#CDCDCD", 
      colorSolid: "#5EB7DE", 
      //selectedColor: "#5EB7DE", 
      //outlineColor: "#666666", 
      //rollOverColor: "#88CAE7", 
      //rollOverOutlineColor: "#FFFFFF", 
      selectable: true 
     }; 
     map.ZoomControl = { buttonFillColor: '#CCCCCC' }; 
     map.areasSettings = { 
      autoZoom: true, 
      //This is the parameter to be modified to change the Color of the state when SELECTED 
      selectedColor: "#cc9900", 
      //This is the parameter to be modified to change the Color of the MAP 
      color: '#CCFF00', 
      //This is the parameter to be modified to change the Color of the state when ROLLING OVER 
      rollOverColor: '#009900', 
      rollOverOutlineColor: '#009900' 
     }; 
     map.mouseWheelZoomEnabled = true; 
     map.write("mapdiv"); 



    }); 

ответ

1

решение для вашего запроса в разделе наконечника на веб-сайте amchart. http://www.amcharts.com/tips/weather-map/

Я копирую здесь часть кода. Ключ создает массив изображений и элемент imageURL.

var map = AmCharts.makeChart("chartdiv", { 

type: "map", 
"theme": "none", 
pathToImages: "http://www.amcharts.com/lib/3/images/", 

dataProvider: { 
    map: "worldLow", 
    zoomLevel: 5.5, 
    zoomLongitude: 10, 
    zoomLatitude: 52, 
    images: [{ 
     latitude: 40.416775, 
     longitude: -3.703790, 
     imageURL: "http://extra.amcharts.com/images/weather/weather-rain.png", 
     width: 32, 
     height: 32, 
     label: "Madrid: +22C" 
    }, { 
     latitude: 48.856614, 
     longitude: 2.352222, 
     imageURL: "http://extra.amcharts.com/images/weather/weather-storm.png", 
     width: 32, 
     height: 32, 
     label: "Paris: +18C" 
    },#### More cities 
    { 
     latitude: 59.329323, 
     longitude: 18.068581, 
     imageURL: "http://extra.amcharts.com/images/weather/weather-rain.png", 
     width: 32, 
     height: 32, 
     label: "Stockholm: +8C" 
    }] 
}, 

imagesSettings: { 
    labelRollOverColor: "#000", 
    labelPosition: "bottom" 
}, 

areasSettings: { 
    rollOverOutlineColor: "#FFFFFF", 
    rollOverColor: "#CC0000", 
    alpha:0.8 
} 
});  

Соответствующий HTML код будет:

<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script> 
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script> 
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script> 
<div id="chartdiv"></div>