javascript - 某些 Google map 功能在 Blogger 中使用时未显示

标签 javascript html google-maps-api-3 blogger

我正在尝试在博客上添加 Google map (使用 Blogger)。该脚本使用 Blogger API 检索博客中的每篇文章并获取其位置 (Lat/Lng)。它创建了一个 map ,显示了连接所有这些地方的多段线。它还会在最后访问的地方显示一个标记,并将 map 居中放置在那里(这里应该是布宜诺斯艾利斯)。

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

Comparison of how the maps looks like in firefox and Blogger

这很奇怪,因为正确显示了路径(折线)而不是标记。此外,不考虑 map 的属性(即:中心位置、卫星 View )。然而,当我四处移动 map 时,正确的 map 有时会出现几分之一秒!

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

以及生成第一张 map 的实际代码(我只是将其复制/粘贴到博文中以获取第二张 map ):

<!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>

有人知道问题出在哪里吗?

预先感谢您的帮助!!!

干杯,

尼古拉斯

最佳答案

我查看了您的页面,看起来您有两张 map ,一张叠在另一张上面。

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

我猜如果你删除多余的 javascript,它会正常工作。

关于javascript - 某些 Google map 功能在 Blogger 中使用时未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13584603/

相关文章:

javascript - 开发一个在 Electron 或 JS 中始终位于顶部的粘性组件

javascript - 在增量搜索 JS 中设置突出显示的文本样式

google-maps-api-3 - Google map API v3 - KML 层更改

javascript - Google map V3 - 未定义方向服务

javascript - 带有可点击路线/信息窗口的 Google map v3 行车路线

javascript - 将 Vue 组件暴露给外部项目

javascript - Redux - 如何从商店获取数据并发布它

javascript - 样式不适用于 Safari/Firefox 中的 LitElement

javascript - 如何将值传递给 angularjs 指令?

javascript - 如何以通用样式排列文本框