Ammaps - мои собственные изображения должны быть добавлены в определенной широте и долготе

Question

Мне дали следующее требование. Необходимо составить график погоды для отдельных крупных городов Канады.

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

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

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");



    });

Answer 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>