当前位置

首页 » 博客 » James Qi的博客

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

James Qi 在 2011年1月27日 - 14:47 提交

新版谷歌地图API

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

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

 

自由标签:

评论

匿名用户 (未验证)

2011年5月16日 - 11:22

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

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

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

James Qi / 祁劲松

匿名用户 (未验证)

2011年10月28日 - 14:47

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

匿名用户 (未验证)

2011年11月18日 - 08:37

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

现在v3没了tabs信息窗口

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

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

James Qi / 祁劲松

匿名用户 (未验证)

2011年11月18日 - 16:08

infowindowtab 不是 google bar

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

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

 

下面是我嵌入需要显示的经纬度的代码，其中用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 / 祁劲松

添加新评论

关于文本格式的更多信息

Plain text

  • 不允许使用HTML标签。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。