4

編集：現在は機能していますが、ユーザーが位置情報サービスを許可していないか、持っていない場合は読み込まれません。jsfiddleの例については、受け入れられた回答のコメントを参照してください。

私はいくつかのチュートリアルと質問を調べましたが、何が起こっているのか（またはこの場合は起こっていないのか）を静かに理解することはできません。ユーザーがリンクをクリックしたときに地図を読み込んでいます。これにより、ユーザーの現在の場所が中央にあり、マーカーがユーザーの場所にある地図が読み込まれます。ただし、外部のマーカーはif (navigation.location)読み込まれないようです。以下は私の現在のコードです：

function initialize() {
        // Check if user support geo-location
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                var userLat = position.coords.latitude;
                var userLong = position.coords.longitude;
                var mapOptions = {
                    zoom: 8,
                    center: point,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                }

            // Initialize the Google Maps API v3
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);

            // Place a marker
            new google.maps.Marker({
                position: point,
                map: map,
                title: 'Your GPS Location'
            });
        });
    } else {
        var userLat = 53;
        var userLong = 0;
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(userLat, userLong),
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
        // Place a marker
        new google.maps.Marker({
            position: point,
            map: map,
            title: 'Default Location'
        });
        // Initialize the Google Maps API v3
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    }
    <?
    for ($i = 0; $i < sizeof($userLocations); $i++) {
        ?>
        var userLatLong = new google.maps.LatLng(<? echo $userLocations[$i]['lat']; ?>, <? echo $userLocations[$i]['long']; ?>);
        new google.maps.Marker({
            position: userLatLong,
            map: map,
            title:"<? echo $userLocations[$i]['displayName'] . ', ' . $userLocations[$i]['usertype']; ?>"
        });
        <?
    }
    ?>
}

function loadMapScript() {
    if (typeof(loaded) == "undefined") {
        $("#showMap").css("display", "none");
        $("#showMapLink").removeAttr("href");
        $("#map").css("height", "600px");
        $("#map").css("width", "600px");
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=true&callback=initialize";
        document.body.appendChild(script);
        loaded = true;
    } else {
        alert("Map already loaded!");
    }
}

loadMapScript（）は、ユーザーがリンクをクリックしたときに呼び出されます。php forループは、すべての情報を含む事前に作成された配列をループします。
私はそれを完全には理解していないと思います。

var userLatLong = new google.maps.LatLng(53, 0);
            new google.maps.Marker({
                position: userLatLong,
                map: map,
                title:"Title"
            });

コンソール（Google Chrome）に入ると、次のエラーが発生します。

Error: Invalid value for property <map>: [object HTMLDivElement]

ただし、それ以外の場合はエラーは発生しません。どんな助けでも大歓迎です！:)

4

4 に答える 4

8

navigator.geolocation.getCurrentPosition()非同期です。

次のようにコードを再編成します。

var mapOptions = {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.HYBRID
}

function initialize() {
    // Check if user support geo-location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            makeMap(position.coords.latitude, position.coords.longitude, 'Your GPS Location');
        });
    } else {
        makeMap(53, 0, 'DefaultLocation');
    }
}

function makeMap(lat, lng, text) {
    var point = new google.maps.LatLng(lat, lng);
    mapOptions.center = point;
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    new google.maps.Marker({
        position: point,
        map: map,
        title: text
    });
    <?php for ($i = 0; $i < sizeof($userLocations); $i++): ?>
    var userLatLong = new google.maps.LatLng(<? echo $userLocations[$i]['lat']; ?>, <? echo $userLocations[$i]['long']; ?>);
    new google.maps.Marker({
        position: userLatLong,
        map: map,
        title:"<? echo $userLocations[$i]['displayName'] . ', ' . $userLocations[$i]['usertype']; ?>"
    });
    <?php endforeach ?>
}

また、$userLocationsを次のようなJavaScript変数にブートストラップすることを検討してください。

var userLocations = <?php print json_encode($userLocations) ?>;

次に、言語を混合する代わりに、JavaScriptでforループを実行します。

于 2012-05-07T19:00:57.433 に答える
1

やってみました：

var map = null;
function initialize() { ... }

次に、内部のコードを変更します。

map = new google.maps.Map( ... ); //make this the first line
if (navigator.geolocation) {
    // Change the code from:
    var map ...
    // to:
    map ...

他のすべての場所で（を使用せずに）マップを直接参照するだけなvarので、機能するはずです。

于 2012-05-07T19:06:34.213 に答える
0

変化する：

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

に：

map = new google.maps.Map(document.getElementById("map"), mapOptions);

のためvar、マップ変数はのスコープに関連付けられていますinitialize()。これを削除すると、グローバルマップ変数（またはwindow.map）として設定され、関数の外部で使用できるようになりinitialize()ます。

何が起こっているのかというと、HTML要素があります<div id="map">。多くのブラウザでは、グローバル変数はhtml要素IDから作成されるため、にmap等しくなりdocument.getElementById('map')ます。

編集：実際には、これはChromeコンソールでの問題を説明するだけです。map内で行うように、マーカーをアタッチする前に設定する必要がありますif (navigator.geolocation) {}。これは、ユーザーロケーションマーカーが配置されていない理由も説明しています。それらを配置するコードは、の前に initialize()実行されます。このコードinitializeを独自の関数内または関数内に配置し、からその関数を呼び出しますinitialize。

于 2012-05-07T18:21:51.243 に答える
0

マーカーを作成しているように見えますが、何もしていません。新しいマーカーを次のように変更してみてください。

var marker = new google.maps.Marker({
               position: point,  // this won't actually work - point is out of scope
               title: 'Your GPS Location'
           });

marker.setMap(map);

編集：ポイントがマップ内にあることを確認してください！

var bounds = new google.maps.LatLngBounds();
bounds.extend(point);
map.fitBounds(bounds);
于 2012-05-07T18:24:31.227 に答える