`

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

阅读更多
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>



分享到:
评论

相关推荐

    api-asn1-api-1.0.0-M20-API文档-中文版.zip

    赠送jar包:api-asn1-api-1.0.0-M20.jar; 赠送原API文档:api-asn1-api-1.0.0-M20-javadoc.jar; 赠送源代码:api-asn1-api-1.0.0-M20-sources.jar; 赠送Maven依赖信息文件:api-asn1-api-1.0.0-M20.pom; 包含...

    mapstruct-jdk8-1.2.0.Final-API文档-中英对照版.zip

    赠送原API文档:mapstruct-jdk8-1.2.0.Final-javadoc.jar; 赠送源代码:mapstruct-jdk8-1.2.0.Final-sources.jar; 赠送Maven依赖信息文件:mapstruct-jdk8-1.2.0.Final.pom; 包含翻译后的API文档:mapstruct-jdk8...

    jakarta.annotation-api-1.3.5-API文档-中文版.zip

    赠送jar包:jakarta.annotation-api-1.3.5.jar; 赠送原API文档:jakarta.annotation-api-1.3.5-javadoc.jar; 赠送源代码:jakarta.annotation-api-1.3.5-sources.jar; 赠送Maven依赖信息文件:jakarta.annotation...

    jakarta.validation-api-2.0.1-API文档-中文版.zip

    赠送jar包:jakarta.validation-api-2.0.1.jar; 赠送原API文档:jakarta.validation-api-2.0.1-javadoc.jar; 赠送源代码:jakarta.validation-api-2.0.1-sources.jar; 赠送Maven依赖信息文件:jakarta.validation...

    jakarta.xml.bind-api-2.3.3-API文档-中文版.zip

    赠送jar包:jakarta.xml.bind-api-2.3.3.jar; 赠送原API文档:jakarta.xml.bind-api-2.3.3-javadoc.jar; 赠送源代码:jakarta.xml.bind-api-2.3.3-sources.jar; 赠送Maven依赖信息文件:jakarta.xml.bind-api-...

    javax.ws.rs-api-2.0.1-API文档-中文版.zip

    赠送jar包:javax.ws.rs-api-2.0.1.jar; 赠送原API文档:javax.ws.rs-api-2.0.1-javadoc.jar; 赠送源代码:javax.ws.rs-api-2.0.1-sources.jar; 赠送Maven依赖信息文件:javax.ws.rs-api-2.0.1.pom; 包含翻译后...

    mapstruct-jdk8-1.2.0.Final-API文档-中文版.zip

    赠送原API文档:mapstruct-jdk8-1.2.0.Final-javadoc.jar; 赠送源代码:mapstruct-jdk8-1.2.0.Final-sources.jar; 赠送Maven依赖信息文件:mapstruct-jdk8-1.2.0.Final.pom; 包含翻译后的API文档:mapstruct-jdk8...

    jakarta.validation-api-2.0.1-API文档-中英对照版.zip

    赠送jar包:jakarta.validation-api-2.0.1.jar; 赠送原API文档:jakarta.validation-api-2.0.1-javadoc.jar; 赠送源代码:jakarta.validation-api-2.0.1-sources.jar; 赠送Maven依赖信息文件:jakarta.validation...

    API-MS-WIN一系列丢失DLL打包

    API-MS-WIN一系列丢失DLL打包 dll列表 api-ms-win-core-console-l1-1-0.dll api-ms-win-core-datetime-l1-1-0.dll api-ms-win-core-debug-l1-1-0.dll api-ms-win-core-errorhandling-l1-1-0.dll api-ms-win-core-...

    jakarta.validation-api-2.0.2-API文档-中文版.zip

    赠送jar包:jakarta.validation-api-2.0.2.jar; 赠送原API文档:jakarta.validation-api-2.0.2-javadoc.jar; 赠送源代码:jakarta.validation-api-2.0.2-sources.jar; 赠送Maven依赖信息文件:jakarta.validation...

    javax.transaction-api-1.2-API文档-中文版.zip

    赠送jar包:javax.transaction-api-1.2.jar; 赠送原API文档:javax.transaction-api-1.2-javadoc.jar; 赠送源代码:javax.transaction-api-1.2-sources.jar; 赠送Maven依赖信息文件:javax.transaction-api-1.2....

    javax.annotation-api-1.2-API文档-中文版.zip

    赠送jar包:javax.annotation-api-1.2.jar; 赠送原API文档:javax.annotation-api-1.2-javadoc.jar; 赠送源代码:javax.annotation-api-1.2-sources.jar; 赠送Maven依赖信息文件:javax.annotation-api-1.2.pom;...

    jakarta.servlet-api-4.0.4-API文档-中英对照版.zip

    赠送jar包:jakarta.servlet-api-4.0.4.jar; 赠送原API文档:jakarta.servlet-api-4.0.4-javadoc.jar; 赠送源代码:jakarta.servlet-api-4.0.4-sources.jar; 赠送Maven依赖信息文件:jakarta.servlet-api-4.0.4....

    jakarta.annotation-api-1.3.5-API文档-中英对照版.zip

    赠送jar包:jakarta.annotation-api-1.3.5.jar; 赠送原API文档:jakarta.annotation-api-1.3.5-javadoc.jar; 赠送源代码:jakarta.annotation-api-1.3.5-sources.jar; 赠送Maven依赖信息文件:jakarta.annotation...

    jakarta.xml.bind-api-2.3.2-API文档-中英对照版.zip

    赠送jar包:jakarta.xml.bind-api-2.3.2.jar; 赠送原API文档:jakarta.xml.bind-api-2.3.2-javadoc.jar; 赠送源代码:jakarta.xml.bind-api-2.3.2-sources.jar; 赠送Maven依赖信息文件:jakarta.xml.bind-api-...

    jaxb-api-2.3.1-API文档-中文版.zip

    赠送jar包:jaxb-api-2.3.1.jar; 赠送原API文档:jaxb-api-2.3.1-javadoc.jar; 赠送源代码:jaxb-api-2.3.1-sources.jar; 赠送Maven依赖信息文件:jaxb-api-2.3.1.pom; 包含翻译后的API文档:jaxb-api-2.3.1-...

    运动休闲娱乐——运势测算行业SOP.pdf

    运动休闲娱乐——运势测算行业SOP.pdf 运动休闲娱乐——运势测算行业SOP.pdf 运动休闲娱乐——运势测算行业SOP.pdf 运动休闲娱乐——运势测算行业SOP.pdf 运动休闲娱乐——运势测算行业SOP.pdf 运动休闲娱乐——运势...

    解决api-ms-win-crt-runtime-l1-1-0.dll 丢失问题 绿色版 工具下载

    提示api-ms-win-crt-runtime-l1-1-0.dll 丢失,安装这个小玩意就可以解决了

    javax.servlet.jsp.jstl-api-1.2.1.jar

    javax.servlet.jsp.jstl-api-1.2.1.jar

    jjwt-api-0.11.2-API文档-中文版.zip

    赠送jar包:jjwt-api-0.11.2.jar; 赠送原API文档:jjwt-api-0.11.2-javadoc.jar; 赠送源代码:jjwt-api-0.11.2-sources.jar; 赠送Maven依赖信息文件:jjwt-api-0.11.2.pom; 包含翻译后的API文档:jjwt-api-...

Global site tag (gtag.js) - Google Analytics