如何调用Google地图?

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

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

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

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

代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>    
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  <html>    
      <head>    
      <script    
          src="http://maps.google.com/maps?file=api&v=2&sensor=true;    
          key=ABQIAAAAevysxt9O5lBUCrSalm80MxQx8gmx0K-_Fjj4Tf8bNXH3BBSxZRRmI_CuZM2zQyuXEpG_uxt-aqPr-A"    
          type="text/javascript"></script>    
          //author:67566894   <script language="javascript" type="text/javascript">    
      function load() {     //加载地图    
          if (GBrowserIsCompatible()) {     
              var map = new GMap2(document.getElementById("map"));     
              map.addControl(new GSmallMapControl());    //放大缩小    
              map.addControl(new GMapTypeControl());     //地图种类    
              map.enableScrollWheelZoom();    //启用鼠标滚轮    
              map.setCenter(new GLatLng(39.9000, 116.3000), 6);   //地图坐标 三个参数分别为 "纬度" "经度" "比例尺"    
             
              function createMarker(point, address,name,tel) {  //创建标记内容及标记的鼠标事件    
                 var marker = new GMarker(point);    
                 var html = '<div>'+    
                     '<a >Name:'+ name +'</a><br/>'+    
                     '<a >Address:'+address +'</a><br/>'+    
                     '<a >telephone:'+tel +'</a>'+    
                     '</div>';    
                 GEvent.addListener(marker, "mouseover", function() {    
                     marker.openInfoWindowHtml(html);    
                 });    
                 GEvent.addListener(marker, "mouseout", function() {    
                     marker.closeInfoWindow();    
                 });    
                 GEvent.addListener(marker, "click", function() {    
                     map.setCenter(point, 12);     
                 });    
                 return marker;    
             }    
             var point = new GLatLng(39.9000,116.3000);     // 设置标记    
             map.addOverlay(createMarker(point,'beijing','sh','123456'));//加入标记    
         }      
     }        
  </script>    
      </head>    
      <body onload="load()">    
          <div id="map" style="width: 750px; height: 500px"></div>    
      </body>    
  </html> 

PS:如果有写错的地方,欢迎指出,谢谢。

posted @ 2016-11-17 20:13  前端女侠  阅读(11548)  评论(1编辑  收藏  举报