google maps v3 初印象
无疑google map、google earth 应用十分广泛。也被人们熟知，google maps已经推出第三版本。google maps v3与老版本变化不大，如果以前用过老版本的朋友肯定知道，在自己开发的网站中嵌入或使用google map必须要自己申请google map api key但是在天国申请这个码并不容易。但是以开源著称的google 在其google map v3 中取消了应用码。使得开发、应用google map变得更容易。
好啦。废话了一通后进入本次的主体。体验一下google map v3的开发。由于刚刚接触v3 maps 所以只学会了点皮毛。
一、加载地图
首先要在网站或页面中引入、开发google map就必须要在代码中添加对google maps的api引用。格式如下：
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=cn" type="text/javascript"></script>
我们看到在引入google map文件时添加了三个参数：
1） v=3 这个参数主要标识请求的地图版本为第三版。如果想要引入第二版地图需要将请求文件改为以下格式。
<script src="http://ditu.google.com/maps?file=api&v=2&key=你注册的API密钥" type="text/javascript"></script>
2）sensor=false 这个参数是设置是否使用传感器确定用户位置。false 表示不开启。由于浏览器的安全设置即使我们把这一参数设置为true当加载地图时也会被浏览器拦截，并询问你是否使用。
3）language=cn 这个参数主要选择地图显示的语言为中文。
但是只引入文件还不会加载地图。如果要加载地图，我们必须首先为加载地图提供容器并对容器设置width、height两个属性来确定加载地图的区域。
<div id="maps" style="width:300px; height:400px;">
有了容器后我们还必须创建一个地图实例。
- <script type="text/javascript">
- function drawMaps()
- {
- var mycenter = new google.maps.LatLng(30.82796,120.1787811);
- var map = new google.maps.Map(document.getElementById('maps'), {
- zoom: 6,
- center: mycenter,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- });
- }
- </script>
- <body onload="javascript:drawMaps();">
- <div id="maps" style="width:300px; height:400px;">
- </div>
- </body>
运行后的效果如图：
下面来对代码分别解释一下：
第4行实例化一个坐标LatLng方法有两个参数分别为纬度、经度。注意顺序不要颠倒。如果知道某一地区想要获取此地区的坐标，你可以在google map中查到该位置。然后点击右键选择这是什么。此时会在google map中生成一个标记将鼠标放在该标记上就会显示该位置的经纬度。
第5行创建地图实例，构建实例时需要至少一个参数，第一个参数为加载地图的容器，第二个参数为一些属性列表。
在属性列表中第6行设置缩放级别，数字越大地图越详细、包含的区域面积越小。这一点与v2正好相反，需要注意。
第7行设置地图的加载中心位置。
第8行设置地图类型（mapTypeId）此参数必须显示设置。因为在v3中此属性不再带有默认值。
mapTypeId的有效参数如下：
google.maps.MapTypeId.HYBRID 该地图类型显示卫星图像上的主要街道透明图层
google.maps.MapTypeId.ROADMAP 该地图类型显示普通街道地图
google.maps.MapTypeId.SATELLITE 该地图类型显示卫星图像
google.maps.MapTypeId.TERRAIN 该地图类型显示带有自然特征的地图
还需注意的是第12行对初始函数的调用。当然你也可以使用window.onload(rawMaps)事件。
说明：如果出现未加载的情况，首先要对代码进行校对。如果代码编写无误，并出现Uncaught TypeError: Cannot read property 'LatLng' of undefined错误则有可能是网速太慢造成的响应超时。
二、添加标记
当我们在自己的网站嵌入google map时我们大多是希望表示某一地区的，并在这一位置添加说明窗口。为了达到这一效果我们就必须对加载的地图上创建标记。
创建的标记一般包含以下几部分：
标记图片-->用于醒目表示某位置
标记阴影-->为了使标记更加有层次感
信息窗口-->用于标识该标记的内容
信息窗口的显示方式-->用于设置信息窗口的显示方式主要有两种：加载地图后自动显示或者点击标记后显示。
对于标记图片google已经提供了大量的代表性的图片如：comany.png、hotel.png、factory.png....等。当然我们可以使用自己制作的图片。代码如下：
var image_company = 'http://google-maps-icons.googlecode.com/files/company.png';
标记阴影图片我们可以使用google已经提供好的图片，当然也可以使用自己的图片。代码如下：
var shadow = new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/shadow.png');
信息窗口并不是一个标记的必须组成部分。但是我建议对每个标记都添加信息窗口，这样可以使其他人更容易明白标记地址的原因后其他信息。代码如下：
- var infowindow = new google.maps.InfoWindow({
- maxWidth:200,
- content: '<div class="mapinfo"><h6>信息窗口</h6><li>这个是备注信息</li><li>地址：天津</li> <li>E-Mail:<a href="#">mail@test.com</a></li></div>'
- });
从以上代码中可以明白创建信息窗口实例时要设置最大宽度，窗口的内容。窗口的内容可以使用html标记。
信息窗口的显示方式：
加载地图后就显示信息窗口：
infowindow.open(map, marker);
点击标记后显示窗口：
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
完整代码：
/*----------- 标记图片(factory.png company.png school.png hotel.png) ------------*/
var image_company = 'http://google-maps-icons.googlecode.com/files/company.png';
/*----------- 标记的阴影图片 ----------------------------------------------------*/
var shadow = new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/shadow.png');
/*----------- 添加标记 -----------------------------------------------------------*/
var marker = new google.maps.Marker({
position: mapCenter,
map: map,
icon: image_company,
shadow: shadow,
title: '标记'
});
/*----------- 添加信息窗口 ----------------------------------------------------*/
var infowindow = new google.maps.InfoWindow({
maxWidth:200,
content: '<div class="mapinfo"><h6>测试</h6><li>这个是备注信息</li><li>地址：天津</li> <li>E-Mail:<a href="meilto:ss@ss.com">ss@ss.com</a></li></div>'
//size: new google.maps.Size(80,30),
});
/**---------- 信息窗口的显示方式 ------------------------------------------------*/
infowindow.open(map, marker);//地图加载完毕后即显示
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});//点击标记后显示信息窗口
显示效果：
