Ammaps - 我自己的图片需要添加特别的经纬度

我已经被给出以下要求。需要绘制天气特别主要城市在加拿大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"); 



    });

来源

2014-10-07 user1533486

在上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>

来源

2014-11-10 14:00:17 aberna

Ammaps - 我自己的图片需要添加特别的经纬度

回答

相关问题