2

こんにちは、マップを配置してユーザーの場所を表示し、ユーザーが移動できる他の場所を表示する必要があるモバイルアプリを構築していますが、挿入すると機能しないため、これは私の作業コードリンクhttp://jsfiddle です.net/yV6xv/1066/マップは機能し、maprkers は機能し、位置情報も機能しますが、http://jsfiddle.net/yV6xv/1067/ が機能しないときは、非常に小さな間違いだと思います。しかし、私のコードを修正できますか?それは小さなことだと確信しています:/

function initialize() {

    var locations = [
        ['<b>Cafee Bellagio</b> <a href="http://google.com">more info</a><br><br>Gothersgade 11<br>1123 København K<br>3314 5472<br><br><img src="https://twimg0-a.akamaihd.net/profile_images/644051119/CoffeeReviewLogo-100.jpg"></img><br><a href="http://google.com">Write a review</a> <a href="http://google.com">Get Directions</a>', 55.6911, 12.5939],
        ['<b>Cafee Nzsikvo</b> <a href="http://google.com">more info</a><br><br>Gothersgade 11<br>1123 København K<br>3314 5472<br><br><img src="https://twimg0-a.akamaihd.net/profile_images/644051119/CoffeeReviewLogo-100.jpg"></img><br><a href="http://google.com">Write a review</a> <a href="http://google.com">Get Directions</a>', 55.6883, 12.5597],
        ['<b>Cafee Bellagio</b> <a href="http://google.com">more info</a><br><br>Gothersgade 11<br>1123 København K<br>3314 5472<br><br><img src="https://twimg0-a.akamaihd.net/profile_images/644051119/CoffeeReviewLogo-100.jpg"></img><br><a href="http://google.com">Write a review</a> <a href="http://google.com">Get Directions</a>', 55.6832, 12.5714],
        ['<b>Cafee Bellagio</b> <a href="http://google.com">more info</a><br><br>Gothersgade 11<br>1123 København K<br>3314 5472<br><br><img src="https://twimg0-a.akamaihd.net/profile_images/644051119/CoffeeReviewLogo-100.jpg"></img><br><a href="http://google.com">Write a review</a> <a href="http://google.com">Get Directions</a>', 55.678272, 12.503643,],
        ['<b>Cafee Bellagio</b> <a href="http://google.com">more info</a><br><br>Gothersgade 11<br>1123 København K<br>3314 5472<br><br><img src="https://twimg0-a.akamaihd.net/profile_images/644051119/CoffeeReviewLogo-100.jpg"></img><br><a href="http://google.com">Write a review</a> <a href="http://google.com">Get Directions</a>', 55.713207, 12.526474,]
        ];


    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,

        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

    // Check if user support geo-location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var geolocpoint = new google.maps.LatLng(latitude, longitude);
                map.setCenter(geolocpoint );
            var mapOptions = {
                zoom: 8,
                center: geolocpoint,
                mapTypeId: google.maps.MapTypeId.HYBRID
            }
            // Place a marker
            var geolocation = new google.maps.Marker({
                position: geolocpoint,
                map: map,
                title: 'Your geolocation',
                icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
            });
        });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);



kastelet.openInfoWindowHtml(
    'Hello, <strong>World!</strong>'
);​
4

1 に答える 1

1

ここに 2 つの問題があります。

  1. マップの中心を設定しません。ドキュメントに従って必要です: https://developers.google.com/maps/documentation/javascript/reference#Map

  2. あなたの#mapdivは内側#page4にありheight、マップキャンバスを表示するように正しく設定されていません

    • の高さ#page4とコンテンツを設定#page4する100%と、すべて問題ありません
    • これはhtml, body { height: 100% }、Google の SimpleMap の例の定義と同等です。

ここを参照してください: http://jsfiddle.net/dJYRJ/ (#page4 であるプロファイル タブに移動します)

NB : マップが正しく表示されるように、CSS を少し調整する必要があります。

于 2012-12-21T11:23:10.697 に答える