1

我有存储在数据库中的位置,我正在遍历它们并在谷歌地图(API v3)上为每个位置(JS 和 Razor 的混合)放置标记。

我使用的代码来自我几天前在 StackOverFlow 上提出的一个问题。有问题的两个地址是:

  1. 6-7 Hall Place, Spalding, PE11, 1SA, UK
  2. 29 Union Street, 伯明翰, B2 4LR, UK

这些地址在这里完美显示。但是当我在我的网站(目前是本地主机)上尝试它们时,一个出现在旧金山,另一个出现在美国路易斯安那州!

这是我正在使用的 JavaScript 代码(注意,混合了一些 C#/Razor):

<script type="text/javascript">

    // Get the map container node.
    var mapContainer = $("#myMap");
    var geocoder = new google.maps.Geocoder();

    // Create the new Goole map controller using our
    // map (pass in the actual DOM object). Center it
    // above the first Geolocated IP address.
    map = new google.maps.Map(
        mapContainer[ 0 ],
        {
            zoom: 11,
            center: new google.maps.LatLng(
                51.51121,
                -0.11982
            ),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    );


    // I add a marker to the map using the given latitude
    // and longitude location.
    function addMarker(latitude, longitude, label) {
        var myLatlng = new google.maps.LatLng(latitude, longitude);
        // Create our "tiny" marker icon
        var iconImage = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';

        // Create the marker - this will automatically place it
        // on the existing Google map (that we pass-in).
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(
                latitude,
                longitude
            ),
            title: (label || ""),
            icon: iconImage,
            center: myLatlng,
            zoom: 10
        });



        // Return the new marker reference.
        return(marker);
    }

    // I update the marker's position and label.
    function updateMarker( marker, latitude, longitude, label ){
        // Update the position.
        marker.setPosition(
            new google.maps.LatLng(
                latitude,
                longitude
            )
        );

        // Update the title if it was provided.
        if (label){
            marker.setTitle( label );
        }
    }

    function placeMarkerForAddress(address, city, postcode, country) {
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    title: address + ', ' + city + ', ' + postcode + ', ' + country
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    //now add markers
    @foreach (var item in Model.Events) {
        @:placeMarkerForAddress('@item.Location.Address', '@item.Location.City', '@item.Location.PostCode', 'UK');
        @:console.log('boo!');
    }

    // -------------------------------------------------- //
    // -------------------------------------------------- //
    // -------------------------------------------------- //
    // -------------------------------------------------- //


    // Check to see if this browser supports geolocation.
    if (navigator.geolocation) {

        // This is the location marker that we will be using
        // on the map. Let's store a reference to it here so
        // that it can be updated in several places.
        var locationMarker = null;


        // Get the location of the user's browser using the
        // native geolocation service. When we invoke this method
        // only the first callback is requied. The second
        // callback - the error handler - and the third
        // argument - our configuration options - are optional.
        navigator.geolocation.getCurrentPosition(
            function (position) {

                // Check to see if there is already a location.
                // There is a bug in FireFox where this gets
                // invoked more than once with a cahced result.
                if (locationMarker) {
                    return;
                }

                // Log that this is the initial position.
                console.log("Initial Position Found");

                // Add a marker to the map using the position.
                locationMarker = addMarker(
                    position.coords.latitude,
                    position.coords.longitude,
                    "Initial Position"
                );
            },
            function (error) {
                console.log("Something went wrong: ", error);
            },
            {
                timeout: (5 * 1000),
                maximumAge: (1000 * 60 * 15),
                enableHighAccuracy: true
            }
        );

        // Now tha twe have asked for the position of the user,
        // let's watch the position to see if it updates. This
        // can happen if the user physically moves, of if more
        // accurate location information has been found (ex.
        // GPS vs. IP address).
        //
        // NOTE: This acts much like the native setInterval(),
        // invoking the given callback a number of times to
        // monitor the position. As such, it returns a "timer ID"
        // that can be used to later stop the monitoring.
        var positionTimer = navigator.geolocation.watchPosition(
            function (position) {

                // Log that a newer, perhaps more accurate
                // position has been found.
                console.log("Newer Position Found");

                // Set the new position of the existing marker.
                updateMarker(
                    locationMarker,
                    position.coords.latitude,
                    position.coords.longitude,
                    "Updated / Accurate Position"
                );
            }
        );

        // If the position hasn't updated within 5 minutes, stop
        // monitoring the position for changes.
        setTimeout(
            function () {
                // Clear the position watcher.
                navigator.geolocation.clearWatch(positionTimer);
            },
            (1000 * 60 * 5)
        );
    }
</script>

我很困惑!我尝试使用 FireBug 调试 JS,但我认为 GeoCode API 上必须有某种超时机制,当我尝试在调试模式下移动代码时它会给我错误。此外,我无法理解为什么我的地图没有以用户找到的位置为中心。

4

1 回答 1

1

尝试使用您的地理定位器请求的完整地址,并将区域设置为英国(如果您的所有地址都在英国),这应该会缩小搜索范围

function placeMarkerForAddress(address, city, postcode, country) {
    var fullAddress = address + ', ' + city + ', ' + postcode + ', ' + country;
    geocoder.geocode( { 'address': fullAddress, 'region':'UK'}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                title: fullAddress
            });
        } else {
                alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

当您获得更新的位置时,您需要将地图居中并移动标记

function updateMarker( marker, latitude, longitude, label ){
    // Update the position.
    var pos=new google.maps.LatLng(latitude,longitude);
    // move the marker
    marker.setPosition(pos);
    // centre the map
    marker.getMap().setCenter(pos);
    // Update the title if it was provided.
    if (label){
        marker.setTitle( label );
    }
}
于 2013-04-02T04:25:25.610 回答