Question

编辑：它现在有效，但如果用户不允许或没有基于位置的服务，则不会加载。请参阅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]

但是，我没有收到任何错误。任何帮助将非常感激！：）

Answer 1

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循环，而不是混合语言。

Answer 2

你试过了吗？

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），这样就行了。

Answer 3

变化：

 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内或其自己的函数中，并从{{1}}调用该函数。

Answer 4

看起来你正在创建标记，但没有用它做任何事情。尝试将新标记更改为：

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

Google Maps API（v3）添加/更新标记

4 个答案: