我正在尝试在博客上添加 Google map (使用 Blogger)。该脚本使用 Blogger API 检索博客中的每篇文章并获取其位置 (Lat/Lng)。它创建了一个 map ,显示了连接所有这些地方的多段线。它还会在最后访问的地方显示一个标记,并将 map 居中放置在那里(这里应该是布宜诺斯艾利斯)。
我写了一些 html/javascript 代码来做到这一点,它在浏览器中运行良好(下图第一张)。但是,当我尝试在博主页面/帖子中包含 html 代码时, map 的某些功能不再存在(下图第二张)。
这很奇怪,因为正确显示了路径(折线)而不是标记。此外,不考虑 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/