本文主要总结Google map API V3使用中最简单也是最常见的一些操作以及相关概念，如果需要更加详细的信息，请直接阅读Google提供的关于map的文档。

google map api v3文档链接：

英文版：https://developers.google.com/maps/documentation/javascript/reference

中文版：https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-CN

1、在页面中加入Google Map服务

src="https://maps.google.com/maps/api/js?sensor=false">

其中sensor参数用于指明此应用程序是否使用传感器确定用户的位置，取值为true或false。

2、加载Google Map API

function initialize() {

var myLatlng = new google.maps.LatLng(39.9629, 116.3581);

var myOptions = {

zoom: 16,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map(document.getElementByIdx_x("map_canvas"), myOptions);

}

google.maps.event.addDomListener(window, "load", initialize);

最后一句话是打开浏览器加载地图。

3、向地图中添加marker

function initialize() {

var myLatlng = new google.maps.LatLng(39.9629, 116.3581);

var myOptions = {

zoom: 16,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map(document.getElementByIdx_x("map_canvas"), myOptions);

var image='Image/webcam.png';

var marker1 = new google.maps.Marker({

position: lamyLatlngtlng[j],

map: map,

icon:image,

title:'hello,world!'

})

}

每个标记都是一个google.maps.Marker对象，在实例化时需要给定一定的配置信息，如标记的位置。

通过icon可以设定自己想显示的图标，不设置则显示Google map默认的图标。title表示鼠标放到marker

上要显示的值。

4、向地图中添加信息窗口infowindow

function initialize() {

var myLatlng = new google.maps.LatLng(39.9629, 116.3581);

var myOptions = {

zoom: 16,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map(document.getElementByIdx_x("map_canvas"), myOptions);

var image='Image/webcam.png';

var marker1 = new google.maps.Marker({

position: lamyLatlngtlng[j],

map: map,

icon:image,

title:'hello,world!'

})

var contentString = 'Hello World';

var infowindow = new google.maps.InfoWindow({

content: contentString

});

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map,marker);

});

}

每个信息窗口都是一个google.maps.InfoWindow对象，在实例化时需要给定一定的配置信息，如窗口中的内容，标记的位置。

其 中需要说明的是，配置信息中的content即可以是html字符串，也可以是一个dom节点。要让一个信息窗口显示出来，我们可以调用它的open方 法，并制定显示在那个Map实例对象中。注意，如果在信息窗口构造时的配置中已经制定了位置（通过position字段），那么直接使用 infoWindow.open( map )，就可以显示在地图的制定位置上。当然，我们也可以将信息窗口的显示绑定在已经在地图中的标记对象中，只需在open的第二个参数中制定标记对象即可 infoWindow.open( map, marker )。

5、事件绑定

使用google.maps.event.addListener()方法来进行事件的监听。该方法接受三个参数：一个对象，一个待侦听事件以及一个在指定事件发生时调用的函数。

(1)监听地图的缩放：

google.maps.event.addListener(map, 'zoom_changed', function() {

});

(2)标记的点击：

google.maps.event.addListener( marker, 'click', function( event) {

// 点击事件后要实现的函数；

});

(3)监听dom事件:

google.maps.event.addDomListener(window, 'load', initialize);

以上的基本功能都是我用到过的，当然Google map API V3的功能远远不止这些，如果还有更高的要求，请直接访问google的官方文档。

示例：

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

<script type="text/javascript"

src="http://maps.googleapis.com/maps/api/js?">

</script>

<script type="text/javascript">

function initialize() {

var mapOptions = {

center: new google.maps.LatLng(23.154748, 113.337045),

zoom: 2,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"),

mapOptions);

var marker = new google.maps.Marker({

position: new google.maps.LatLng(23.154748, 113.337045),

map: map,

title:'中国赛宝实验室\n工业和信息化部电子第五研究所'

});

//marker.setMap(map);

var contentString = '中国赛宝实验室\n工业和信息化部电子第五研究所';

var infowindow = new google.maps.InfoWindow({

content: contentString

});

infowindow.open(map,marker);

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map,marker);

});

}

</script>

</head>

<body onload="initialize()">

<div id="map_canvas" style="width: 100%; height: 100%"></div>

</body>

</html>

Google map API V3的更多相关文章

  1. Google Map API V3开发（1）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  2. Google Map API V3开发（2）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  3. Google Map API V3开发（3）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  4. Google Map API V3开发（4）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  5. Google Map API V3开发（5）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  6. Google Map API V3开发（6） 代码

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  7. Google Map API V3调用arcgis发布的瓦片地图服务

    由于最近项目需要用到CAD制作的地图,但之前一直使用的是用谷歌离线瓦片地图的方式,怎么样把CAD图像地图一样有缩放,移动的功能放到网页显示成了难题, 原先的谷歌地图的代码难道就不能用了?重新写一套代码 ...

  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. 在CentOS 7上使用Yum源安装和卸载 MongoDB 3.4

    在CentOS 7上使用Yum源安装和卸载 MongoDB 3.4 1.配置Yum源 vim /etc/yum.repos.d/mongodb-org-3.4.repo [mongodb-org-3. ...

  2. MongoDB学习笔记（二）--Capped集合 && GridFS存储文件

    Capped集合                                                            Capped集合的大小是固定的,如果空间都被用完了,新添加的对象 ...

  3. 敏捷方法之极限编程(XP)和 Scrum区别

    敏捷(Agile)作为一种开发流程, 目前为各大公司所采用, 敏捷流程的具体实践有XP 和Scrum, 似乎很少有文章介绍这两者的区别, 发现一篇外文, 见解非常深刻, 特将其翻译一把. 原文(DIF ...

  4. 【Struts2学习笔记（9）】单文件上传和多文件上传

    (1)单文件上传 第一步:在WEB-INF/lib下增加commons-fileupload-1.2.1.jar.commons-io-1.3.2.jar. 这两个文件能够从http://common ...

  5. 分布式文件存储FastDFS（七）FastDFS配置文件具体解释

    配置FastDFS时.改动配置文件是非常重要的一个步骤,理解配置文件里每一项的意义更加重要,所以我參考了大神的帖子,整理了配置文件的解释.原帖例如以下:http://bbs.chinaunix.net ...

  6. CAD打开慢，卡在99%

    问题描述 打开AutoCAD的时候,软件停留在加载99%,点击出现[无法响应],要么等待,要么强行关闭,若平时正常关闭CAD时也异常缓慢. 原因分析 破解版,没有联网就激活了.CAD默认启动需要联网, ...

  7. ZH奶酪：Windows7+VirtualBox安装Ubuntu虚拟机问题总结

    1.下载VirtualBox(我的是4.3.26版本) https://www.virtualbox.org/ 2.下载Ubuntu ISO文件(我的是ubuntu-14.04-desktop-amd ...

  8. Java从零开始学十一(类和对象)

    一.面象对象 二.什么是类 我肯定说,不知道.不清楚. 简单讲类是java中的基本单元,类是具有相同特性和行为的对象集合 三.类的定义 3.1.类的定义 class 类名称{ 数据类型  属性 ; … ...

  9. rpm常用命令及rpm参数介绍

    RPM是RedhatPackageManager的缩写,是由RedHat公司开发的软件包安装和管理程序,同Windows平台上的Uninstaller比较类似.使用RPM,用户可以自行安装和管理Lin ...

  10. 1z0-052 q209_7

    7: In which of the scenarios will the DBA perform recovery? (Choose all that apply.) A.The alert log ...