javascript - Ammaps - 我自己的图像需要添加特定的纬度和经度

Question

我收到了以下要求。 需要绘制加拿大特定主要城市的天气

我可以通过(网络处理程序和查询字符串)从互联网上的 API 获取当前天气详细信息。 因此，我有方便的纬度和经度详细信息以及天气状况(阴天、晴天、雨天等)

我只需要在多云的城市上显示云，在下雨的城市上显示雨图像等 这必须在 Javascript AMmaps 中完成。 我的完整代码粘贴在下面。我没有找到将我自己的图像推送到 map 的方法

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>