2

ブログにGoogleマップを追加しようとしています（Bloggerを使用）。スクリプトは、Blogger APIを使用してブログ内の各投稿を取得し、その場所（Lat / Lng）を取得します。これらすべての場所を結ぶポリラインを示すマップを作成します。また、最後に訪れた場所にマーカーが表示され、地図の中央にも表示されます（ここでは、ブエノスアイレスである必要があります）。

これを行うための小さなhtml/javascriptコードを作成しましたが、ブラウザーで正常に機能します（下の最初の画像）。ただし、ブロガーのページ/投稿にhtmlコードを含めようとすると、マップの一部の機能が表示されなくなります（下の2番目の画像）。

FirefoxとBloggerでのマップの外観の比較

パス（ポリライン）は正しく表示されますが、マーカーは表示されないため、非常に奇妙です。さらに、マップのプロパティ（つまり、中心位置、衛星ビュー）は考慮されません。ただし、マップを移動すると、正しいマップがほんの一瞬表示されることがあります。

これをテストしているブログへのリンクは次のとおりです：http： //testblogapinico.blogspot.ch/p/map.html

そして、最初のマップを生成する実際のコード（2番目のマップを取得するためにブログ投稿でこれをコピー/貼り付けするだけです）：

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

あなたのページを見てみましたが、2つの地図が重なっているように見えました。

ソースを見ると、実際にマップを初期化する2つのJavaScriptがあります。興味深いことに、どちらも「初期化」という名前が付けられています。なぜエラーが発生しないのかわかりません。

余分なJavaScriptを削除すると、正しく機能すると思います。

于 2012-11-27T22:50:12.737 に答える