Google Maps API 简易教程（一）

一、API Key

使用Google API,必须要从Google 那里获取一个免费的API 键。获取过程如下：

（1）用google账户登陆https://code.google.com/apis/console/,点击“Create Project”按钮，

（2）在服务列表中，找到Google Maps API v3，点击off,使其处于on的状态。

（3）点击左边菜单的"API Access"，它将询问你创建一个OAuth 2.0 client id（简单应用不必）

（4）在下一屏幕中，将会显示API key的相关信息。

备注：保存好API key!(在所有Google Maps APP中必须使用)

二、创建一个基本的Google Map

为了简单起见，下面创建一个以英国伦敦为中心的Google Map。相关代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

</body>
</html>

备注：script中的key为上一节注册的API key。

三、Google Maps-Overlays

Overlays是地图上的对象，对应着相关的经度/维度坐标。比较常用的有以下几种：

.Marker-地图上单个位置。

.Polyline-地图上一系列直线。

.Polygon-地图上一系列直线，并且处于封闭的形状。

.Circle 和 Rectangle。

.info Windows-地图上，上升气球里显示内容。

（1）加入一个Marker

Marker构造函数创建一个标签（注意：必须先设置位置属性）。

接着，使用setMap()方法加入marker到map中。

代码如下：

var marker=new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);

（2）使Marker动起来

代码如下：

marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});

marker.setMap(map);

（3）Google Maps-Polyline

Polyline是通过一系列排好序的坐标的线。它支持一下属性：

.path-具体化线的几个经度/纬度坐标。

.strokeColor-为线设置一个16进制的颜色值。

.strokeOpacity-为线设置透明度（值介入0.0和1.0之间）

.strokeWeight-具体化线的权重。

.editable-定义用户是否可编辑改线。

代码如下：

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});

（4）Circle的用法

circle支持如下属性：

.center-circle的中心。

.radius-具体圆的半径，以米为单位。

.strokeColor-为环绕圆的线设置一个16进制的颜色。

.strokeOpacity-为环绕圆的线设置透明度。

.strokeWeight-为环绕圆的线设置权重，单位像素。

.fillColor-为圆的内部区域设置一个16进制颜色值。

.fillOpacity-为圆的内部填充颜色设置透明度。

.editable-解释同上。

代码如下：

var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});

（5）InfoWindow的使用

InfoWindow是为Marker对象显示相关文本信息：

例子代码如下：

var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

infowindow.open(map,marker);

posted @ 2013-02-27 23:27 williamcai 阅读( ...) 评论( ...) 编辑收藏

Google Maps API 简易教程（一）相关推荐

Google Maps API 简易教程（四）
Google Maps 类型一.基本地图类型 Google Maps API支持一下map类型: .ROADMAP(正式的,默认为2D地图) .SATELLITE(逼真的地图) .HYBRID(逼真 ...
Google maps API开发
Google maps API开发注:经纬度的查询,找了半天,终于找着活神仙了,(*^__^*) 嘻嘻-- 1.经纬度查询工具:http://www.playgoogle.com/googlemap ...
Google Maps API v2 android版本开发国内手机不支持google play Service相关问题解决--图文教程
Google Maps API v2 android版本开发国内手机不支持google play Service相关问题解决--图文教程参考文章: (1)Google Maps API v2 an ...
Android Google Maps API教程-入门
This is android google maps api tutorial. 这是android Google Maps API教程. In this tutorial I will teach ...
maps-api-v3_Android Google Maps API集成
maps-api-v3 In this tutorial we'll show how to integrate android google maps API in our application ...
maps-api-v3_利用Google Maps API发挥创意
maps-api-v3 您已经设计了一个闪亮的新网站: 仔细选择颜色,版式和照片,以完美反映公司的品牌形象. 然后您的客户要求您添加地图. 当然,您可以使用地图构建"向导",例如每 ...
使用Google Maps API和google-maps-react进行React Apps
This tutorial aims at integrating the google maps API to your React components and enabling you to d ...
Google Maps API –地图类型示例
Google Maps API支持四种地图类型: ROADMAP –显示普通的街道/道路地图(默认地图类型). 地形-根据地形信息显示正常的街道/道路地图. 卫星–仅显示卫星图像. 混合–普通和卫星视 ...
Google Maps API V3 之绘图库信息窗口
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

Google Maps API 简易教程（一）

Google Maps API 简易教程（一）

Google Maps API 简易教程（一）相关推荐

最新文章

热门文章