Google map API V3
本文主要总结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的更多相关文章
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- Google Map API V3调用arcgis发布的瓦片地图服务
由于最近项目需要用到CAD制作的地图,但之前一直使用的是用谷歌离线瓦片地图的方式,怎么样把CAD图像地图一样有缩放,移动的功能放到网页显示成了难题, 原先的谷歌地图的代码难道就不能用了?重新写一套代码 ...
- Google 地图 API V3 使用入门
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google 地图 API V3 之事件
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
随机推荐
- Go的安装和使用/卸载/升级、安装指定版本
mac: 1.brew install go默认安装最新的,更新go也是这条命令,建议这个方法,省事 2.从官网https://golang.org/dl/下载pkg包安装,官方说1.12是最后一个支 ...
- 用Spark向HBase中插入数据
java代码如下: package db.insert; import java.util.Iterator; import java.util.StringTokenizer; import org ...
- 数据库实例: STOREBOOK > 表空间 > 编辑 表空间: USERS
ylbtech-Oracle:数据库实例: STOREBOOK > 表空间 > 编辑 表空间: USERS 表空间 > 编辑 表空间: USERS 1. 一般信息返回顶部 ...
- maven选包算法（两个相同的包）
引入了两个相同groupId和artifactId的jar,但是版本不同,选择层级最浅的包,层级可以通过依赖树来看
- 剑指offer-序列化二叉树
请实现两个函数,分别用来序列化和反序列化二叉树 以前提交的内存超出了,可能现在要用非递归实现了 #include<iostream> #include<math.h> #inc ...
- 按示例学python：使用python抓取网页正文
平时打开一个网页,除了文章的正文内容,通常会有一大堆的导航,广告和其他方面的信息.本博客的目的,在于说明如何从一个网页中提取出文章的正文内容,而过渡掉其他无关的的信息. 这里先看看 demo : ht ...
- （转）U3D不同平台载入XML文件的方法——IOS MAC Android
自:http://www.cnblogs.com/sifenkesi/archive/2012/03/12/2391330.html 在PC上和IOS上读取XML文件的方式略有差别,经测试,IOS上不 ...
- 压缩 MongoDB 的数据文件
MongoDB采用了磁盘空间预分配的机制,为了避免磁盘碎片以及使用mmap后造成的近一步的内存碎片,但是随着数据的增删除改操作,数据文件不可避免的会产生空洞,造成磁盘空间和内存的浪费.本文说的是这方面 ...
- Opera Unite 用户指南
Opera Unite 用户指南 1 Opera Unite 简介 Opera Unite is a collaborative technology that allows you to share ...
- Lisp分配给保护的符号…
在进行调试时,弹出"分配给保护的符号:pf,是否进入中断循环",但似乎不会影响结果. 明经版主解译说是:给受保护的符号重新赋值了,所以有此提示,此提示仅在打开了vlide 编辑器才 ...