2

我正在尝试在博客上添加谷歌地图（使用 Blogger）。该脚本使用 Blogger API 检索博客中的每个帖子并获取其位置 (Lat/Lng)。它创建了一个地图，显示连接所有这些地方的折线。它还在最后访问的地方显示了一个标记，并将地图也居中（这里应该是布宜诺斯艾利斯）。

我写了一段 html/javascript 代码来做到这一点，它在浏览器中运行良好（下面的第一张图片）。但是，当我尝试在博客页面/帖子中包含 html 代码时，地图的某些功能不再存在（下图第二张）。

比较地图在 Firefox 和 Blogger 中的外观

这很奇怪，因为正确显示了路径（折线）但没有显示标记。此外，不考虑地图的属性（即：中心位置、卫星视图）。但是，当我四处移动地图时，正确的地图有时会出现几分之一秒！

这是我正在测试的博客的链接：http: //testblogapinico.blogspot.ch/p/map.html

以及生成第一张地图的实际代码（我只是在博客文章中复制/粘贴了它以获得第二张地图）：

<!DOCTYPE html>
<html>
<body>

<div id="content"></div>
<div id="googleMap" style="width:600px;height:900px;"></div>

<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var Lat = new Array();
var Lng = new Array();
var Place = new Array();

// Get latitude/longitude from Blogger
function handleResponse(response) {
    for(i=0; i< response.items.length; i++){
        Lat.push(response.items[i].location.lat);
        Lng.push(response.items[i].location.lng);
        Place.push(response.items[i].location.name);
    }
}

// Create the map based on locations retrieved from Blogger
function initialize(){
    // Get all latitude and longitude
    var pos = new Array();

    // Get the path
    for(var i=0; i<Lat.length; i++){
        pos[i]=new google.maps.LatLng(Lat[i],Lng[i]);
    }

    // Get the last position
    var lastpos=new google.maps.LatLng(Lat[0],Lng[0]);

    // Create the map
    var mapProp = {
        center:lastpos,
        zoom:4,
        mapTypeId:google.maps.MapTypeId.SATELLITE
        };

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

    // Create the marker of last position
    var marker=new google.maps.Marker({
            position:lastpos,
    });

    marker.setMap(map);

    // Create the path
    var flightPath = new google.maps.Polyline({
        path:pos,
        strokeColor:"#EE0000",
        strokeOpacity:0.6,
        strokeWeight:7
    });

    flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>


<script
src="https://www.googleapis.com/blogger/v3/blogs/884353949349844556/posts?callback=handleResponse&key=AIzaSyAJO5J-pRCaGOIeRLIJfvAPwxpMLKvwebU">
</script>

</body>
</html>

任何人都知道问题可能是什么？

预先感谢您的帮助！！！

干杯，

尼古拉斯

4

1 回答 1

1

我看了你的页面，看起来你有两张地图，一张在另一张上面。

查看源代码，您确实有两个初始化地图的 javascript。有趣的是，它们都被命名为“初始化”——不知道为什么你不只是得到一个错误。

我猜如果你删除额外的 javascript，它会正常工作。

于 2012-11-27T22:50:12.737 回答