Google earth APIGSmallMapControl和GSmallZoomControl控件实现源码及学习笔记

最新推荐文章于 2024-04-30 22:06:17 发布

sada09

最新推荐文章于 2024-04-30 22:06:17 发布

阅读量1k

点赞数

分类专栏： html 学习文章标签： google function div callback button xhtml

本文链接：https://blog.csdn.net/sada09/article/details/7987588

版权

html 学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Google Maps API 2.0解析(17-GSmallMapControl和GSmallZoomControl两个简单的控件)

//GSmallZoomControl控件
        function GSmallZoomControl()
        {
        }
        GSmallZoomControl.prototype=new GControl();
        GSmallZoomControl.prototype.initialize=function(a)
        {
            var b=new GSize(17,35);
            //创建控件层
            var c=CreateElement("div",a.getContainer(),null,b);
            //加载控件图片
            CreateImage(getStaticImageUrl("szc"),c,GPoint.ORIGIN,b,true);
            //创建图片上的可点击区域和触发的事件
            createClickArea(c,[[18,18,0,0,callback(a,a.zoomIn),_mZoomIn],[18,18,0,18,callback(a,a.zoomOut),_mZoomOut]]);
            return c
        };
        GSmallZoomControl.prototype.getDefaultPosition=function()
        {
            return new GControlPosition(0,new GSize(7,7))
        };
        //GSmallMapControl控件
        function GSmallMapControl()
        {
        }
        GSmallMapControl.prototype=new GControl();
        GSmallMapControl.prototype.initialize=function(a)
        {
            var b=new GSize(37,94);
            var c=CreateElement("div",a.getContainer(),null,b);
            //加载控件的图片，要注意的是，Google的控件是一个整体的图片
            CreateImage(getStaticImageUrl("smc"),c,GPoint.ORIGIN,b,true);
            createClickArea(c,[[18,18,9,0,GetCallback(a,a.panDirection,0,1),_mPanNorth],[18,18,0,18,GetCallback(a,a.panDirection,1,0),_mPanWest],[18,18,18,18,GetCallback(a,a.panDirection,-1,0),_mPanEast],[18,18,9,36,GetCallback(a,a.panDirection,0,-1),_mPanSouth],[18,18,9,57,GetCallback(a,a.zoomIn),_mZoomIn],[18,18,9,75,GetCallback(a,a.zoomOut),_mZoomOut]]);
            return c
        };
        GSmallMapControl.prototype.getDefaultPosition=function()
        {
            return new GControlPosition(0,new GSize(7,7))
        };

Google Earth 的学习笔记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAZv5tWpaEimDcG_Vz_BG20hScQ99-hdStwUF2jZ4KXHM7_mEhmhSTOcJWOsAvVJ_89MOKLPBIwRtHMw"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
               
               
        // A TextualZoomControl is a GControl that displays textual "Zoom In"
    	// and "Zoom Out" buttons (as opposed to the iconic buttons used in
    	// Google Maps).
    	function TextualZoomControl() {
    	}
    	TextualZoomControl.prototype = new GControl();

    	// Creates a one DIV for each of the buttons and places them in a container
    	// DIV which is returned as our control element. We add the control to
    	// to the map container and return the element for the map class to
    	// position properly.
    	TextualZoomControl.prototype.initialize = function(map) {
    	  var container = document.createElement("div");

    	  var zoomInDiv = document.createElement("div");
    	  this.setButtonStyle_(zoomInDiv);
    	  container.appendChild(zoomInDiv);
    	  zoomInDiv.appendChild(document.createTextNode("Zoom In"));
    	  GEvent.addDomListener(zoomInDiv, "click", function() {
    	    map.zoomIn();
    	  });

    	  var zoomOutDiv = document.createElement("div");
    	  this.setButtonStyle_(zoomOutDiv);
    	  container.appendChild(zoomOutDiv);
    	  zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
    	  GEvent.addDomListener(zoomOutDiv, "click", function() {
    	    map.zoomOut();
    	  });

    	  map.getContainer().appendChild(container);
    	  return container;
    	}

    	// By default, the control will appear in the top left corner of the
    	// map with 7 pixels of padding.
    	TextualZoomControl.prototype.getDefaultPosition = function() {
    	  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
    	}

    	// Sets the proper CSS for the given button element.
    	TextualZoomControl.prototype.setButtonStyle_ = function(button) {
    	  button.style.textDecoration = "underline";
    	  button.style.color = "#0000cc";
    	  button.style.backgroundColor = "white";
    	  button.style.font = "small Arial";
    	  button.style.border = "1px solid black";
    	  button.style.padding = "2px";
    	  button.style.marginBottom = "3px";
    	  button.style.textAlign = "center";
    	  button.style.width = "6em";
    	  button.style.cursor = "pointer";
    	}
         
    function load() {

      if (GBrowserIsCompatible()) {
    	  
    	  // 创建一个地图并定位
       	  var map = new GMap2(document.getElementById("map"));
       	  
    	  //  添加自定义控件  
    	  map.addControl(new TextualZoomControl());
    	 
       	  map.addControl(new GSmallMapControl()); // 在地图上添加控件
       	  map.addControl(new GMapTypeControl());

       	  GEvent.addListener(map, "moveend", function() {  //添加事件监听器
       	  	var center = map.getCenter();
       	  	document.getElementById("message").innerHTML = center.toString();
       	  });

       	  // 设置地理坐标 
          map.setCenter(new GLatLng(37.4419, -122.1419), 13);
         //map.zoomOut(); 
         // map.zoomIn(); 
          map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world1"));
          map.panDirection(0, 1);   // 北
          map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world2"));
          map.panDirection(0, -1);  // 南
          map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world3"));
          map.panDirection(1, 0);   // 西
          map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world4"));
          map.panDirection(-1, 0);  // 东
          map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world5"));
        	 
          
          // 设置动画
         // window.setTimeout(function() {
           	//map.panTo(new GLatLng(37.4569, -122.1569));
        //  }, 1000); 
          
          // 打开信息窗口
          map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world"));
          
          // 创建图标 Create our "tiny" marker icon
          var icon = new GIcon();
          icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
          icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
          icon.iconSize = new GSize(12, 20);
          icon.shadowSize = new GSize(22, 20);
          icon.iconAnchor = new GPoint(6, 20);
          icon.infoWindowAnchor = new GPoint(5, 1);

          // 添加标记 Add 10 markers to the map at random locations
          var bounds = map.getBounds();
          var southWest = bounds.getSouthWest();
          var northEast = bounds.getNorthEast();
          var lngSpan = northEast.lng() - southWest.lng();
          var latSpan = northEast.lat() - southWest.lat();
          for (var i = 0; i < 10; i++) {
            var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                                    southWest.lng() + lngSpan * Math.random());
            map.addOverlay(new GMarker(point, icon));
          }
          
          //点击事件处理 点击添加标记 存在的则取消 否则添加 
          GEvent.addListener(map, "click", function(marker, point) {
        	  if (marker) {
        	    map.removeOverlay(marker);
        	  } else {
        		  var marker1 = new GMarker(point, {draggable: true}); 
        		  // 拖动开始时 关闭提示 
        		  GEvent.addListener(marker1, "dragstart", function() {
        			  map.closeInfoWindow();
        			  });
        		  // 拖动结束后打开提示 
        		  GEvent.addListener(marker1, "dragend", function() {
        				marker1.openInfoWindowHtml("Just bouncing along...");
        		   });

        	    map.addOverlay(marker1);
        	  }
        	});
      }
    }

    //]]>
    </script>
  </head>
  <body οnlοad="load()" οnunlοad="GUnload()"> <!-- GUnload减少浏览器内存泄露 -->
    <!-- GMap2 的容器 -->
    <div id="map" style="width: 500px; height: 300px"></div>
    <!-- 显示坐标信息 -->
    <div id="message"></div>
  </body>
</html>

sada09

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google earth APIGSmallMapControl和GSmallZoomControl控件实现源码及学习笔记

Google Maps API 2.0解析(17-GSmallMapControl和GSmallZoomControl两个简单的控件) //GSmallZoomControl控件 function GSmallZoomControl() { } GSmallZoomControl.prototype=new GCont
复制链接

扫一扫