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 ...
随机推荐
- Android 项目的代码混淆,Android proguard 使用说明
简单介绍 Java代码是非常easy反编译的. 为了非常好的保护Java源码,我们往往会对编译好的class文件进行混淆处理. ProGuard是一个混淆代码的开源项目.它的主要作用就是混淆,当然它还 ...
- 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 ...
- Mysql之sql语句操作
一.数据库级别操作 1.显示数据库 1 SHOW DATABASES; 默认数据库: mysql - 用户权限相关数据 test - 用于用户测试数据 information_schema - MyS ...
- iOS开发-UITableView表格优化
之前的一篇文章大概讲述了一下UITableView的使用,UITableView在iOS的地位和ListView在Android中的地位基本上算是不相上下,关于ListView的优化网上的也有很多文章 ...
- Android音乐播放-MediaPlayer
当你坐公交无聊的时候,当你淹没在地铁中人潮中的时候,你是否想内心保持一份的安静呢,那么请带上耳机,打开你的音乐播放器,听一首老歌带你进入宁静的世界,音乐播放这个功能在智能手机出现之前,诺基亚时代,甚至 ...
- Android数据适配-ExpandableListView
Android中ListView的用法基本上学的时候都会使用,其中可以使用ArrayAdapter,SimpleAdapter,BaseAdapter去实现,这次主要使用的ExpandableList ...
- Candy leetcode java
题目: There are N children standing in a line. Each child is assigned a rating value. You are giving c ...
- 【leetcode】 9. palindrome number
@requires_authorization @author johnsondu @create_time 2015.7.13 9:48 @url [palindrome-number](https ...
- 【PAT Advanced Level】1013. Battle Over Cities (25)
这题给定了一个图,我用DFS的思想,来求出在图中去掉某个点后还剩几个相互独立的区域(连通子图). 在DFS中,每遇到一个未访问的点,则对他进行深搜,把它能访问到的所有点标记为已访问.一共进行了多少次这 ...
- COM不同的线程模型对列集和同步的不同要求。