如何调用Google地图?

  • A+
所属分类:JavaScript

如何调用Google地图?
在建设网站中用到地图是很常见的,在国内大部分都是用百度地图,但是有时候可能会用到国外地址,这时候就只能使用谷歌地图了。

方法一、使用框架引入谷歌地图

用框架引入谷歌地址是最简单的方法,不是专业开发人员也可以操作。登陆ditu.google.cn地图,输入地址信息,如:"上海东方明珠",把地图移动到合适的视角,点击分享链接后,有两个信息。第一个是一个网址,用于在浏览器中打开的;第二个是一个框架的代码,网站中通常使用这个代码。把代码复制到网站中去就可以了,里面可以自己设定度度,高度,语言等信息。

方法二、使用谷歌地图api开发

代码如下:

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>     
  2.   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">     
  3.   <html>     
  4.       <head>     
  5.       <script     
  6.           src="http://maps.google.com/maps?file=api&v=2&sensor=true;    
  7.           key=ABQIAAAAevysxt9O5lBUCrSalm80MxQx8gmx0K-_Fjj4Tf8bNXH3BBSxZRRmI_CuZM2zQyuXEpG_uxt-aqPr-A"     
  8.           type="text/javascript"></script>     
  9.           //author:67566894   <script language="javascript" type="text/javascript">     
  10.       function load() {     //加载地图     
  11.           if (GBrowserIsCompatible()) {      
  12.               var map = new GMap2(document.getElementById("map"));      
  13.               map.addControl(new GSmallMapControl());    //放大缩小     
  14.               map.addControl(new GMapTypeControl());     //地图种类     
  15.               map.enableScrollWheelZoom();    //启用鼠标滚轮     
  16.               map.setCenter(new GLatLng(39.9000116.3000), 6);   //地图坐标 三个参数分别为 "纬度" "经度" "比例尺"     
  17.                 
  18.               function createMarker(point, address,name,tel) {  //创建标记内容及标记的鼠标事件     
  19.                  var marker = new GMarker(point);     
  20.                  var html = '<div>'+     
  21.                      '<a >Name:'+ name +'</a><br/>'+     
  22.                      '<a >Address:'+address +'</a><br/>'+     
  23.                      '<a >telephone:'+tel +'</a>'+     
  24.                      '</div>';     
  25.                  GEvent.addListener(marker, "mouseover", function() {     
  26.                      marker.openInfoWindowHtml(html);     
  27.                  });     
  28.                  GEvent.addListener(marker, "mouseout", function() {     
  29.                      marker.closeInfoWindow();     
  30.                  });     
  31.                  GEvent.addListener(marker, "click", function() {     
  32.                      map.setCenter(point, 12);      
  33.                  });     
  34.                  return marker;     
  35.              }     
  36.              var point = new GLatLng(39.9000,116.3000);     // 设置标记     
  37.              map.addOverlay(createMarker(point,'beijing','sh','123456'));//加入标记     
  38.          }       
  39.      }         
  40.   </script>     
  41.       </head>     
  42.       <body onload="load()">     
  43.           <div id="map" style="width: 750px; height: 500px"></div>     
  44.       </body>     
  45.   </html>  
钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: