本文主要总结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. QT学习:c++解析html相关

    原来我做爬虫的时候,对页面进行解析的时候总是用很简单粗暴的方法,直接找规律.后来在网上看到了gumbo,尝试了一下,发现确实很好用,所以向大家推荐一下. 以下转自:http://blog.csdn.n ...

  2. seqgan leakgan

    seqgan https://blog.csdn.net/yinruiyang94/article/details/77675586 leakgan https://www.leiphone.com/ ...

  3. 上下变换中 aspect的选择

    在电视制作还没有完全整转到高清之前,有很多原来的SD素材需要转到HD信号进入高清切换或者编辑平台,电视台是电视节目的发射源端 ,所以上变换过程不能引入额外的噪声或者失真: 上变换使用的方式一般有4种: ...

  4. Byedance AI Camp-笔试题目

    最小m段和问题:给定n个整数组成的序列,现在要求将序列分割为m段,每段子序列中的数在原序列中连续排列.如何分割才能使这m段子序列的和的最大值达到最小? Input 第一行输入一个整数t,代表有t组测试 ...

  5. request和request.form和request.querystring的区别

    asp中获取传递的参数,一般用request或者用request成员函数request.form,两种方式都可以获取页面表单传递过来的参数值,一直没留意两种方法有什么区别,我一般喜欢用request( ...

  6. Longest Consecutive Sequence leetcode java

    题目: Given an unsorted array of integers, find the length of the longest consecutive elements sequenc ...

  7. Android权限管理PermissionsDispatcher2.3.2使用+原生6.0权限使用

    PermissionsDispatcher2.3.2使用 Android6.0权限官网https://developer.android.com/about/versions/marshmallow/ ...

  8. jquery获得select option的值和对select option的操作

    <body> <select name="month" id="selMonth" onchange="set()"> ...

  9. win7+iis7+asp+.net+php环境配置

    一.我们先来配置一下iis: f 1. 点击[開始]->[控制面板]->点击[程序和功能]进入下一步 2. 然后,在左側点击[打开或关闭Windows功能].然后会跳出来一个框 3. 開始 ...

  10. Spark+Kafka的Direct方式将偏移量发送到Zookeeper实现（转）

    原文链接:Spark+Kafka的Direct方式将偏移量发送到Zookeeper实现 Apache Spark 1.3.0引入了Direct API,利用Kafka的低层次API从Kafka集群中读 ...