2010.02.22——google map api----天气预报

lipeng88213

浏览: 953219 次
性别:
来自: 北京

最近访客更多访客>>

jklwan

小小书僮

诗人lpp

oyhptiandi01

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (526)

社区版块

存档分类

Google SVN JavaScript SUN HTML

2010.02.22——google map api----天气预报

标记管理器实用工具提供了一个解决这些问题的方案，允许在同一个地图上高效显示数百个标记，并能够指定应显示标记的缩放级别。
要添加该库中包含的工具，可以使用 <script> 标签直接添加 JavaScript 源代码。

<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js">

要使用标记管理器，请创建一个 MarkerManager 对象。在最简单的情况下，只需向其传递地图即可。

var map = new GMap2(document.getElementById("map_canvas")); 
var mgr = new MarkerManager(map);

以下示例创建中国的模拟天气地图。在缩放级别 3 时，显示 20 个随机分布的天气图标。在级别 6 时，可以轻松地辨别出所有 200 个人口超过 30 万的城市，并显示额外 200 个标记。最后，在级别 8 时，会显示 1000 个标记。（注意：为了简化示例，标记将添加在随机位置。）
例子：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
  <head>
    <title>天气预报</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQcTQoRJ_JVFHVwderj38GcfiXt6hQX5E6h3W3sV-l-QbtgIls1pN0iAw"
            type="text/javascript"></script>
    <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"></script>
    <script type="text/javascript">
    //<![CDATA[

    var IMAGES = [ "sun", "rain", "snow", "storm" ];
    var ICONS = [];
    var map = null;
    var mgr = null;
    var batch = [];
    function setupMap() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.setCenter(new GLatLng(37, 107), 4);
        map.enableDoubleClickZoom();
        window.setTimeout(setupWeatherMarkers, 0);
      }
    }
    //随即生成天气图片
    function getWeatherIcon() {
      var i = Math.floor(IMAGES.length*Math.random());
      if (!ICONS[i]) {
        var icon = new GIcon();
        icon.image = "http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/" 
            + IMAGES[i] + ".png";
        icon.iconAnchor = new GPoint(16, 16);
        icon.infoWindowAnchor = new GPoint(16, 0);
        icon.iconSize = new GSize(32, 32);
        icon.shadow = "http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/" 
            + IMAGES[i] + "-shadow.png";
        icon.shadowSize = new GSize(59, 32);
        ICONS[i] = icon;
      }
      return ICONS[i];
    }
    //随即经纬度
    function getRandomPoint() {
      var lat = 37 + (Math.random() - 0.5)*14.5;
      var lng = 101 + (Math.random() - 0.5)*36.0;
      return new GLatLng(Math.round(lat*10)/10, Math.round(lng*10)/10);
    }
    //生成全部标注的数组
    function getWeatherMarkers(n) {
      //var batch = [];
      for (var i = 0; i < n; ++i) {
        var marker = new GMarker(getRandomPoint(), { icon: getWeatherIcon() });
        batch.push(marker);
      }
      return batch;
    }
    //不同级别显示不同的数目
    function setupWeatherMarkers() {
      mgr = new MarkerManager(map);
      mgr.addMarkers(getWeatherMarkers(20), 3);
      mgr.addMarkers(getWeatherMarkers(200), 6);
      mgr.addMarkers(getWeatherMarkers(1000), 8);
      for(var i=0;i<batch.length;i++){
          openWindow(batch[i]);
          }
      mgr.refresh();//只有显式地调用 MarkerManager 的 refresh() 方法，使用 addMarkers() 方法添加的标记才会显示在地图上
    }
    //给每一个标注添加信息窗口
    function openWindow(marker){
    	GEvent.addListener(marker,"click",function(latLng){
      	  marker.openInfoWindowHtml("<b>怒了</b>");
        });
    }
    //]]>
    </script>

  </head>

  <body onload="setupMap()" onunload="GUnload()">
    <div id="map" style="margin: 5px auto; width: 650px; height: 400px"></div>
    <div style="text-align: center; font-size: large;">
      Random Weather Map
    </div>
  </body>
</html>

分享到：