google map api 例子

最新推荐文章于 2022-12-07 17:04:06 发布

lijun_xiao2009

最新推荐文章于 2022-12-07 17:04:06 发布

阅读量646

点赞数

分类专栏： html 文章标签： google function border html div java

本文链接：https://blog.csdn.net/lijun_xiao2009/article/details/8010877

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一：index.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

  <title>My JSP 'index.jsp' starting page</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
</head>
<frameset id="mainFrame" cols="*,300" frameborder="no" border="0" framespacing="0">
      <frame id="leftFrame" src="left.jsp" name="leftFrame" scrolling="yes" οnmοuseοver="this.className='border'"/>
      <frame id="rightFrame" src="right.jsp" name="rightFrame" scrolling="yes" border="1" οnmοuseοver="this.className='border'"/>

</frameset>
<body>

</body>
</html>

二：left.jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Insert title here</title>
  <script
   src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAA8wLmUjXEue3iGVy8-7a1RBQz-J5LV6rASCxLYU1xMqKNc_nHIxRlfu6aZ1L8FRSEZC_4EnN-2PBYAw"
   type="text/javascript"></script>
  <script type="text/javascript"><!--
var map = null;
function load() {
  DragLabel(); //添加的层叠图可以拖动
}
function test1() {
  alert(map.getZoom());
}

//将叠加层添加到地图中，并触发 addoverlay 事件
function createOverlay(pointx, pointy) {
  var markerTest;
  var point = new GLatLng(pointx, pointy);
  map.setCenter(point, 3);
  markerTest = createMarker(point, 1234);
  map.addOverlay(markerTest);
  if (markerTest) //移除上一個點
  {
   //map.removeOverlay(markerTest);
   // alert(markerTest);
  }
}
//从地图中删除叠加层
function removeOverlay1(pointx, pointy) {
  var point = new GLatLng(pointx, pointy);
  alert(pointx);
  map.removeOverlay(createMarker(point, 1234));

}
//从地图中删除所有叠加层
function clearAll() {
  map.clearOverlays();
}
function createMarker(point, index) {
  var tinyIcon = new GIcon();
  tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
  tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
  tinyIcon.iconSize = new GSize(12, 20);
  tinyIcon.shadowSize = new GSize(22, 20);
  tinyIcon.iconAnchor = new GPoint(6, 20);
  tinyIcon.infoWindowAnchor = new GPoint(5, 1);

  var letter = String.fromCharCode("A".charCodeAt(0) + index);
  var letteredIcon = new GIcon(tinyIcon);
  // letteredIcon.image = "http://www.google.cn/mapfiles/marker" + letter + ".png";
  // Set up our GMarkerOptions object
  markerOptions = {
   icon : letteredIcon,
   draggable : true
  };
  var marker = new GMarker(point, markerOptions);

  GEvent.addListener(marker, "dragstart", function() {
   map.closeInfoWindow();
  });

  //鼠标移出层叠图中时产生的事件
  GEvent.addListener(marker, "mouseout", function() {
   marker.closeInfoWindow();
  });

  //鼠标移动到层叠图中时产生的事件
  GEvent.addListener(marker, "mouseover", function() {
   marker.openInfoWindowHtml("水库." + letter);

   var obj=window.parent.frames['rightFrame'].document.getElementById("div1");
   obj.innerHTML="水库." + letter;
   //alert(obj);
  });

  //弹起来触发的事件
  GEvent.addListener(marker, "dragend", function() {
   marker.openInfoWindowHtml("弹起来了.....");
   //alert(map.getCenter()); //得到地图坐标
   });
  return marker;
}
var markers = new Array();
//可拖动的标记
function DragLabel() {
  map = new GMap2(document.getElementById("map"));
  //map.addControl(new GSmallMapControl()); //显示地图分级
  map.addControl(new GLargeMapControl()); //显示地图分级
  map.addControl(new GMapTypeControl());
  //创建缩略图控件（右下角）
  var overviewMap = new GOverviewMapControl();
  map.addControl(overviewMap);
  // map.addControl(G_PHYSICAL_MAP);

  var center = new GLatLng(32.940546, 118.781133);
  map.setCenter(center, 14);
  map.addOverlay(createMarker(center, 14));
  map.enableScrollWheelZoom(); //滚动分级

  // 添加叠加图到地图上
  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());
   var marker = createMarker(point, i);
   markers[markers.length] = marker;
   map.addOverlay(marker);
  }

  // map.mouseover(center);
  //鼠标移动到地图上时产生的事件
  GEvent.addListener(map, "mouseover", function() {
   //alert("dfdf");
    //marker对象获取经纬度
    var marker = new GMarker(center, {
     title : '__tag_168$59_这是地图中心位置!__tag_168$71_',
     draggable : true
    });
    var lat = marker.getLatLng().lat(); //纬度
    var lng = marker.getLatLng().lng(); //经度

    // map.
    //alert("纬度：" + lat + " 经度：" + lng);
    //document.getElementById("lat").innerHTML=lat;
    //document.getElementById("lng").innerHTML=lng;

})

  //鼠标单击地图时产生的事件
  GEvent.addListener(map, "click", function() {
   alert("click 事件");


  })
}

//通过地址定位（此方法要声明一个全局的marker变量才可以用）
function showAddress(address) {
  //            var mapDiv1 = map.markers();
  //alert(markers.length);
  var marker = null;
  var geocoder = new GClientGeocoder();
  if (geocoder) {
   geocoder.getLatLng(address, function(point) {
    if (!point) {
     alert(address + " not found");
    } else {
     var point = new GLatLng(32.940546, 118.781133);
     if (marker) //移除上一個點
     {
      map.removeOverlay(marker);
     }
     map.setCenter(point, 13);
     var title = "地址";
     marker = createMarker(point, title, address);
     map.addOverlay(marker);
     marker.openInfoWindowHtml(address, {
      maxContent : address,
      maxTitle : title
     });
    }
   });
  }
}
//定位
function Location(pointx, pointy) {
  /// alert("dfdf");
  var marker = markers[0];
  var title = "地址";
  var address = "地址";
  marker.openInfoWindowHtml(address, {
   maxContent : address,
   maxTitle : title
  });
}
--></script>
</head>
<body οnlοad="load()" οnunlοad="GUnload()">
  <div id="map" style="width: 100%; height: 550px">
  </div>
  <div id="text">
   (longitude ,latitude)The middle point
  </div>
</body>
</html>