本文主要总结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. Android 项目的代码混淆,Android proguard 使用说明

    简单介绍 Java代码是非常easy反编译的. 为了非常好的保护Java源码,我们往往会对编译好的class文件进行混淆处理. ProGuard是一个混淆代码的开源项目.它的主要作用就是混淆,当然它还 ...

  2. pat 1060 比较科学计数法

    trick: 1.前导0 如:000001,000.000001 2.出现0时也要按照科学计数法输出 e.g. 4 00000.00000 0001 NO 0.0000*10^0 0.1*10^1 3 ...

  3. Mysql之sql语句操作

    一.数据库级别操作 1.显示数据库 1 SHOW DATABASES; 默认数据库: mysql - 用户权限相关数据 test - 用于用户测试数据 information_schema - MyS ...

  4. iOS开发-UITableView表格优化

    之前的一篇文章大概讲述了一下UITableView的使用,UITableView在iOS的地位和ListView在Android中的地位基本上算是不相上下,关于ListView的优化网上的也有很多文章 ...

  5. Android音乐播放-MediaPlayer

    当你坐公交无聊的时候,当你淹没在地铁中人潮中的时候,你是否想内心保持一份的安静呢,那么请带上耳机,打开你的音乐播放器,听一首老歌带你进入宁静的世界,音乐播放这个功能在智能手机出现之前,诺基亚时代,甚至 ...

  6. Android数据适配-ExpandableListView

    Android中ListView的用法基本上学的时候都会使用,其中可以使用ArrayAdapter,SimpleAdapter,BaseAdapter去实现,这次主要使用的ExpandableList ...

  7. Candy leetcode java

    题目: There are N children standing in a line. Each child is assigned a rating value. You are giving c ...

  8. 【leetcode】 9. palindrome number

    @requires_authorization @author johnsondu @create_time 2015.7.13 9:48 @url [palindrome-number](https ...

  9. 【PAT Advanced Level】1013. Battle Over Cities (25)

    这题给定了一个图,我用DFS的思想,来求出在图中去掉某个点后还剩几个相互独立的区域(连通子图). 在DFS中,每遇到一个未访问的点,则对他进行深搜,把它能访问到的所有点标记为已访问.一共进行了多少次这 ...

  10. COM不同的线程模型对列集和同步的不同要求。