Google Map API如何为当前位置设置标记

时间:2014-02-24 00:41:24

标签: javascript google-maps google-maps-api-3 geolocation

当我尝试将当前坐标添加到数组时,我正在学习谷歌地图API并坚持这个问题。这是我的代码:

var locations = [];

在initialize()中我有:

function initialize() {
    infowindow = new google.maps.InfoWindow();
    var myOptions = {
        zoom: 10,
        mapTypeControl: true,
        navigationControl: true,
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);

    add_location('Place 1', 37.2846372, -123.3270422);
    set_current_location();
    set_markers(new google.maps.LatLngBounds(), map);
}

设置第一个标记,而set_current_location()似乎不起作用。以下是代码的其余部分:

// add new location to the locations array
function add_location(description, lastitude, longtitude) {
    locations.push([description, lastitude, longtitude]);
}

// Set all the markers in the location arrays and bound/frame the map
function set_markers(bounds, map) {
    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
        });
        bounds.extend(marker.position);
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
    map.fitBounds(bounds);
}

// Get current location based on the IP Address
function set_current_location() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);
            var myLat = position.coords.latitude;
            var myLong = position.coords.longitude;
            add_location('My location', position.coords.latitude, position.coords.longitude);
        });
    } else {
        alert("Geolocation is not supported by this browser.");
    }
}

任何人都可以帮忙或给我一个暗示吗?我想将当前位置添加到位置数组,以便我可以跟踪我添加的位置数。非常感谢你。

1 个答案:

答案 0 :(得分:0)

如果您只是将set_markers()移至success getCurrentPosition()回调的末尾并且用户拒绝分享其位置,则您将无法获得地图,只会获得灰色区域。您的地图没有center设置为必需属性。最好定义它:

var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(37.339386, -121.894955),
    mapTypeControl: true,
    navigationControl: true,
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
...

此外,您还可以在set_markers() error回调结束时致电getCurrentPosition(),以防用户拒绝分享其位置,您可以显示可用位置:

// Get current location based on the IP Address
function set_current_location() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            /*
            var pos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);
            var myLat = position.coords.latitude;
            var myLong = position.coords.longitude;
            */
            add_location('My location', 
                        position.coords.latitude, 
                        position.coords.longitude);

            set_markers(new google.maps.LatLngBounds(), map);
        }, function error(err) {
            console.log('error: ' + err.message);
            set_markers(new google.maps.LatLngBounds(), map);            
        });
    } else {
        alert("Geolocation is not supported by this browser.");
    }
}

请参阅example at jsbin