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

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

用框架引入谷歌地址是最简单的方法，不是专业开发人员也可以操作。登陆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：如果有写错的地方，欢迎指出，谢谢。

如何调用Google地图？的更多相关文章

  1. 网页中调用Google地图

    <html> <head>  <meta http-equiv="Content-Type" content="text/html; cha ...

  2. ios调用Google地图

    现在的ios版本一般只支持https协议,而引用谷歌地图API时只提供src="http://maps.google.cn/maps/api/js..",https协议无法使用,解 ...

  3. Google地图接口API之申请免费API Key(一)

    使用谷歌地图API V3创建交互式地图,首先需要拥有一个免费的 Google 地图 API key. 如果想调用Google地图的接口,首先需要拥有一个免费的 Google 地图 API key.想要 ...

  4. Qt5.1.1实现调用google地图显示

    1.调用google地图工程文件 QT +=webkit QT +=webkitwidgets QT += core gui greaterThan(QT_MAJOR_VERSION, ): QT + ...

  5. 如何使用google地图的api（整理）

    如何使用google地图的api(整理) 一.总结 一句话总结:直接用script标签引google地图api即可. 1.如何使用google地图的api? 页面引用javascript文件<s ...

  6. c#两种方式调用google地球,调用COM API以及调用GEPLUGIN 与js交互，加载kml文件，dae文件。将二维高德地图覆盖到到三维谷歌地球表面。

    网络上资源很多不全面,自己在开发的时候走了不少弯路,在这里整理了最全面的google全套开发,COM交互,web端交互.封装好了各种模块功能. 直接就可以调用. 第一种方式:调用COMAPI实现调用g ...

  7. Google 地图 API V3 之事件

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  8. Google 地图 API V3 之控件

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  9. Google 地图 API V3 之 叠加层

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

随机推荐

  1. C语言 · 高精度加法

    问题描述 输入两个整数a和b,输出这两个整数的和.a和b都不超过100位. 算法描述 由于a和b都比较大,所以不能直接使用语言中的标准数据类型来存储.对于这种问题,一般使用数组来处理. 定义一个数组A ...

  2. Fis3的前端工程化之路[三大特性篇之资源定位]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  3. 在.NET Core 里使用 BouncyCastle 的DES加密算法

    .NET Core上面的DES等加密算法要等到1.2 才支持,我们可是急需这个算法的支持,文章<使用 JavaScriptService 在.NET Core 里实现DES加密算法>需要用 ...

  4. 继电器是如何成为CPU的（1）

    继电器是如何成为CPU的(1) ——<穿越计算机的迷雾>整理和总结 究竟是如何设计的电路,具有计算和控制的智力? 这一点也不高深.本系列文章从初中学的最简单的电路图说起,看看能不能从最初的 ...

  5. pt-table-checksum

    pt-table-checksum是percona公司提供的一个用于在线比对主从数据一致性的工具. 实现原理 将一张大表分成多个chunk,每次针对一个chunk进行校验,同时将校验的结果通过REPL ...

  6. hash表长度优化证明

    hash表冲突的解决方法一般有两个方向: 一个是倾向于空间换时间,使用向量加链表可以最大程度的在节省空间的前提下解决冲突. 另外一个倾向于时间换空间,下面是关于这种思路的一种合适表长度的证明过程: 这 ...

  7. Android数据加密之SHA安全散列算法

    前言: 对于SHA安全散列算法,以前没怎么使用过,仅仅是停留在听说过的阶段,今天在看图片缓存框架Glide源码时发现其缓存的Key采用的不是MD5加密算法,而是SHA-256加密算法,这才勾起了我的好 ...

  8. RabbitMq应用一的补充（RabbitMQ的应用场景）

    直接进入正题. 一.异步处理 场景:发送手机验证码,邮件 传统古老处理方式如下图 这个流程,全部在主线程完成,注册->入库->发送邮件->发送短信,由于都在主线程,所以要等待每一步完 ...

  9. 通过自定义特性，使用EF6拦截器完成创建人、创建时间、更新人、更新时间的统一赋值(使用数据库服务器时间赋值，接上一篇)

    目录: 前言 设计(完成扩展) 实现效果 扩展设计方案 扩展后代码结构 集思广益(问题) 前言: 在上一篇文章我写了如何重建IDbCommandTreeInterceptor来实现创建人.创建时间.更 ...

  10. bzoj4724--数论

    题目大意: B进制数,每个数字i(i=0,1,...,B-1)有a[i]个.你要用这些数字组成一个最大的B进制数X(不能有前导零,不需要 用完所有数字),使得X是B-1的倍数.q次询问,每次询问X在B ...