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"
            });

进入控制台（谷歌浏览器），我得到错误：

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

但是，否则我不会收到任何错误。任何帮助将非常感激！:)

4

4 回答 4

8

navigator.geolocation.getCurrentPosition() is asynchronous.

Reorganize your code like this:

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 ?>
}

Also, consider bootstraping the $userLocations into a JavaScript variable like this:

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

Then execute your for loop in JavaScript, instead of mixing languages.

于 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，您的 map 变量与initialize(). 删除它会将其设置为全局映射变量（或window.map），使其在initialize()函数之外可用。

发生的事情是您有一个 HTML 元素<div id="map">。在许多浏览器中，全局变量是从 html 元素 ID 创建的，因此mapequals 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 回答