注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

快乐小屋

 
 
 

日志

 
 

使用新版谷歌地图Google Maps JavaScript API V3遇到的几个问题  

2012-05-06 16:31:35|  分类: Google Map |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Google地图API确实是个好东西,我们很多网站上都嵌入了,一直用的是V2,虽然知道有了V3但也不想轻易改动,这次在做新网站的时候才准备实施,也遇到几个问题记录如下:

浏览器兼容性问题

原始例子代码如果前后有<div></div>包含的话,会在部分浏览器中无法显示,例如IE6、IE7中正常,但IE8和 Chrome中看不到,同事一起折腾了好一阵子,算是搞好了,需要根据<!DOCTYPE html>标准在css代码中严格定义高度、宽度,并带有px的字样:

<div id="map_canvas" style="width:500px; height:400px">正在载入地图,请稍等...</div>

如果缺少了px或者使用的100%都有可能在部分浏览器中无法显示,这个小小的问题都花去好好多个小时!

信息框代码变更

从V2到V3,一些函数都发生了变化,官方网站中的例子也不是很全,为了实现以前的信息框,又去找了一些资料才搞定。整个例子代码如下:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var query = "武汉市发展大道176号兴城大厦";
var display = "<b>单位:</b>武汉市劲捷电子信息有限公司";
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
}

function codeAddress() {
var address = query;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var infowindow = new google.maps.InfoWindow({
content:"<b>地址:</b>"+address+"<br>"+display
});
infowindow.open(map, marker);
} else {
alert("未能解析该地址的原因: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:400px"></div>
</body>

V3 缺少GoogleBar和AdSense

以前V2中添加GoogleBar很方便,让不能自动解析找到地址的浏览者自己重新输入地址查找,新版本中却没有这个功能,嵌入AdSense的功能也没 有加入,我搜索了网上的帖子,一年多都没有解决这两个问题。替换的办法是另外嵌入Local Search代码或者旁边放置AdSense代码,总之麻烦多了。

现在也看不到V3有特别的好处,只是可以不需要以前的API Key了。


  评论这张
 
阅读(1652)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018