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

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

用框架引入谷歌地址是最简单的方法,不是专业开发人员也可以操作。登陆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. 事务日志已满,原因为“ACTIVE_TRANSACTION”

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 异常处理汇总-数据库系列  http://www.cnblogs.com/dunitia ...

  2. 开始学nodejs——net模块

    net模块的组成部分 详见 http://nodejs.cn/api/net.html 下面整理出了整个net模块的知识结构,和各个事件.方法.属性的用法 net.Server类 net.Socket ...

  3. PHP 获取 特定时间范围 类

    目录  前序 用途 功能及事项 使用方法 代码及注释 前序: 总体来说,我更应该是一个 android 移动开发者,而不是一个 phper,如果说只做移动端的 APP ,我也不会学这么多,这 2年来, ...

  4. Aaron Stannard谈Akka.NET 1.1

    Akka.NET 1.1近日发布,带来新特性和性能提升.InfoQ采访了Akka.net维护者Aaron Stannard,了解更多有关Akka.Streams和Akka.Cluster的信息.Aar ...

  5. ASP.NET中常用的优化性能的方法

    1. 数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源.ASP.NET中提供了连接池( ...

  6. RabbitMQ + PHP (二)AMQP拓展安装

    上篇说到了 RabbitMQ 的安装. 这次要在讲案例之前,需要安装PHP的AMQP扩展.不然可能会报以下两个错误. 1.Fatal error: Class 'AMQPConnection' not ...

  7. ES6之let命令详解

    let与块级作用域 { var foo='foo'; let bar='bar'; } console.log(foo,'var'); //foo varconsole.log(bar ,'bar') ...

  8. H3 BPM社区:流程开发者的学习交流平台

    企业上市有上市流程,融资扩充有融资流程,项目招投标有招投标流程,部门领导选拔有晋升流程,员工请假休假有请假流程,早起上班梳洗有符合自己习惯的流程--生活处处是流程,流程无处不在.但从信息化建设来说,企 ...

  9. AEAI DP V3.7.0 发布,开源综合应用开发平台

    1  升级说明 AEAI DP 3.7版本是AEAI DP一个里程碑版本,基于JDK1.7开发,在本版本中新增支持Rest服务开发机制(默认支持WebService服务开发机制),且支持WS服务.RS ...

  10. Kafka:主要参数详解(转)

    原文地址:http://kafka.apache.org/documentation.html ############################# System ############### ...