当前位置

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

James Qi 在 2011年1月27日 - 14:47 提交
内容摘要:Google地图API确实是个好东西,我们很多网站上都嵌入了,一直用的是V2,虽然知道有了V3但也不想轻易改动,这次在做新网站的时候才准备实施,也遇到几个问题记录如下: 浏览器兼容性问题 原......

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了。

上面代码显示出来的地图例子如下:

 

评论

-- 发自IP地址: 192.168.0.133 (位置 | 谁是)

div 上定义地图大小缺少了px字样,IE除了quirk模式外死活出不来地图。。

通过搜索找到楼主的宝贵经验~~感激不尽~~

-- 发自IP地址: 192.168.0.133 (位置 | 谁是)

一些小的细节确实容易出问题而难以发现,我们也是反复试出来的,期间也找了很多别人写下的资料,我们的经验教训能帮到其他人就很高兴了!

James Qi / 祁劲松

-- 发自IP地址: 192.168.0.133 (位置 | 谁是)

还好Baidu大神把新闻组也搜出来,在新闻组里面找到了答案,所有的Map容器的父节点都必需有高度

-- 发自IP地址: 192.168.0.133 (位置 | 谁是)

v2版有 infowindowtabs 带标签的信息窗口

现在v3没了tabs信息窗口

请问知道实现V3的TAB信息窗口

-- 发自IP地址: 192.168.0.133 (位置 | 谁是)

我对google maps api的研究并不深,只是勉强实现自己需要的功能,您说的tab不知道是不是我上面说的google bar,如果是的,我们是在地图边上放上一个像google bar的输入框来实现的,如果不是的,那我还不清楚了,您需要在网上其他地方再找,抱歉。

James Qi / 祁劲松

-- 发自IP地址: 192.168.0.133 (位置 | 谁是)

infowindowtab 不是 google bar

是多个信息窗口 以标签的形式 V2有infowindowtab函数提供很方便

虽找不到,还是谢谢你的解答··

 

-- 发自IP地址: 59.173.8.114 (位置 | 谁是)

下面是我嵌入需要显示的经纬度的代码,其中用php加入了经纬度,仅供参考:

function initialize() {
    var myLatlng = new google.maps.LatLng(<?php print $latitude ?>, <?php print $longitude ?>);
    var myOptions = {
      zoom: 11,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    map.setCenter(myLatlng);

James Qi / 祁劲松