google地图学习总结1

来源：互联网发布：淘宝卖家在哪里面注册编辑：程序博客网时间：2024/06/13 10:49

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=gbk"/>
    <title>Google 地图 Java script API 示例</title>
    < script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
            type="text/java script "></ script >
    < script type="text/java script ">
   //计算开始点(测距专用2009-11-05)
  var srcmarker;//开始标注点
  var tarmarker ;//结束标注点
function initialize() {
  if (GBrowserIsCompatible()) { //判断浏览器是否兼容

//创建地图对象绑定的div

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

  //1定点
  map.setCenter(new GLatLng(39.9493, 116.3975), 13);
  //2. 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 < 5; i++) {
    var point = new GLatLng(southWest.lat() + latSpan * Math.random(),southWest.lng() + lngSpan * Math.random());
    //map.addOverlay(new GMarker(point));
    map.addOverlay(createMarker(point, i));
   }
  }
  //带提示的标注点
  function createMarker(point, number)
  {
   var marker = new GMarker(point);
   var message = ["这","是","个","秘密","消息"];
   marker.value = number;
   GEvent.addListener(marker, "click", function()
   {
   var myHtml = "<b>#" + number + "</b><br/>" + message[number -1];
   map.openInfoWindowHtml(point, myHtml);
   });
   return marker;
  }
        /*3.
  G_NORMAL_MAP- 默认视图
  G_SATELLITE_MAP - 显示 Google 地球卫星图像
  G_HYBRID_MAP - 混合显示普通视图和卫星视图
  G_DEFAULT_MAP_TYPES - 这三个类型的数组，在需要重复处理的情况下非常有用
        */
  //map.setMapType(G_SATELLITE_MAP);

  /*4.缩放
  可以通过使用 GMap2 对象的 getZoom() 方法检索地图当前使用的缩放级别。
     可以使用 0（最低缩放级别，在地图上可以看到整个世界）到 19（最高缩放级别，可以看到独立建筑物）之间的缩放级别
  */
  /*5.地图交互
  setCenter()、panTo(平移) 和 zoomIn() ,
  */
  /*
  window.setTimeout(function() {
   map.panTo(new GLatLng(39.927, 116.407));
  }, 1000);
  */
  /*6.信息窗口
  GMap2 对象提供了 openInfoWindow() 方法，该方法将一个点和一个 HTML DOM 元素作为参数。HTML DOM 元素附加到信息窗口容器中，信息窗口的尖端会固定在指定点上。
  GMap2 的 openInfoWindowHtml() 方法相似，但是它使用 HTML 字符串作为其第二个参数而不是 DOM 元素。
  */
  //map.openInfoWindow(map.getCenter(),document.createTextNode("Hello, world"));
  /*7.事件监听
  GEvent.addListener(map,"dblclick", function(overlay, latlng) {
   if (latlng) {
    srcmarker = new GMarker(latlng, {draggable:true});
    map.addOverlay(srcmarker);
    var myHtml = "GPoint 为: " + map.fromLatLngToDivPixel(latlng) + ",缩放级别:" + map.getZoom();
    map.openInfoWindow(latlng, myHtml);
   }
  });
  */
  //GEvent.addListener(map, "click", function() { alert("您点击了地图。");});

  //事件
  /*2009-11-04:查看经纬度信息
        GEvent.addListener(map, "click", function(overlay, latlng) {
          if (latlng) {
            //移除原标识点(仅标识一个点)
            map.clearOverlays();
            //生成标识点
            var marker = new GMarker(latlng, {draggable:true});
            //存储标识点数据
            var latlng=marker.getLatLng();
   var lat = latlng.lat();
        var lng = latlng.lng();
        //$("#search.plat").val("123");因为.操作是jquery有特殊处理
        //$("#search.plng").val("123");
        document.getElementById("search.plat").value=lat;
        document.getElementById("search.plng").value=lng;
            //单击标识事件,查看经纬度
            GEvent.addListener(marker, "click", function() {
              var html = "<table>" +
                         "<tr><td>经度:</td> <td> "+lng+" </td> </tr>" +
                         "<tr><td>纬度:</td> <td> "+lat+" </td> </tr>" +
                         "</table>";
              marker.openInfoWindow(html);
            });
            map.addOverlay(marker);
          }
        });
  */

  /*
  GEvent.addListener(map, "moveend", function()
  {
   var center = map.getCenter();
   document.getElementById("message").innerHTML = center.toString();
  });
  */
  /*8.增加按钮控件
  GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。
  GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认情况下显示在地图的左上角。
  GSmallZoomControl - 小型缩放控件（无平移控件），用于在 Google 地图上显示行车路线的小地图弹出窗口。
  GScaleControl - 地图比例尺
  GMapTypeControl - 让用户切换地图类型（例如“地图”和“卫星”）的按钮
  GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项。
  GOverviewMapControl - 位于屏幕一角的可折叠概览地图。
  */
  var mapControl = new GMapTypeControl();
  map.addControl(mapControl);
  map.addControl(new GLargeMapControl());

  /*9.可拖动的标记
  可拖动标记通过实现以下四类事件来表示其拖动状态：
  click、dragstart、drag 和 dragend。默认情况下，
  标记可点击但不可拖动，所以它们需要通过将额外的标记选项 draggable
  设置为 true 来初始化。可拖动标记拖动结束后默认有弹跳效果。
  如果不喜欢这种效果，请将 bouncy 选项设置为 false，标记会平缓放下
  */

  /*10,距离测算
distanceFrom(other:GLatLng) Number 返回从此点到某个指定点的距离（以米为单位）。地球近似一个球体，因此距离可能会有不会超过 0.3% 的误差。请参见以下信息。
（自 2.89 开始不推荐使用）

distanceFrom(other:GLatLng, radius?:Number) Number 返回从此点到某个指定点的距离（以米为单位）。在默认情况下，根据地球赤道半径的默认值 6378137 米计算此距离。地球近似一个球体，因此距离可能会有不超过 0.3% 的误差（尤其在两极）。也可以传递可选的 radius 参数计算不同于地球半径的球体的 GLatLng 坐标之间的距离。
singlerightclick
srcmarker.getLatLng().distanceFrom(marker,6378137)
  */
  GEvent.addListener(map,"click", function(overlay, latlng) {
   if (latlng) {
       if(tarmarker!=null){
     //map.removeoverlay(tarmarker);
    }
    marker = new GMarker(latlng, {draggable:true});
    if(srcmarker==null)
    {
        srcmarker=marker;
     map.addOverlay(srcmarker);
     var latlng=srcmarker.getLatLng();
     var lat = latlng.lat();
     var lng = latlng.lng();
     var myHtml = "开始点"+" "+lat+" "+lng;
        map.openInfoWindow(latlng, myHtml);
    }else{
     tarmarker=marker;
     map.addOverlay(marker);
     var latlng=marker.getLatLng();
     var lat = latlng.lat();
     var lng = latlng.lng();
     var myHtml = "<table>" +
       "<tr><td>距离:</td> <td> "+srcmarker.getLatLng().distanceFrom(marker.getLatLng(),6378137)+
                         "<tr><td>经度:</td> <td> "+lat+" </td> </tr>" +
                         "<tr><td>纬度:</td> <td> "+lng+" </td> </tr>" +
                         "</table>";
        map.openInfoWindow(latlng, myHtml);
    }
   }
  });
}
</ script >
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>