簡體   English   中英

Google Maps API v3出現問題

[英]Issue with Google Maps API v3

我正在嘗試通過Google Maps API完成以下任務:

  • 在地圖上顯示to_address作為標記
  • 獲取用戶位置
  • 根據gps /用戶輸入提供的信息生成並顯示路線

我已經使最后兩個工作正常。 我現在遇到的問題是,如果未提供位置,則在地圖to_address顯示為標記。

這是我正在使用的代碼。 請記住,最后兩個步驟按預期工作。 我知道我可以使用latlng完成此操作,但這不是我的選擇。 我需要提供一個地址。

var geocoder;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var to_pos;
var to_address = '11161 84th ave delta bc';

function initialize() {

    directionsDisplay = new google.maps.DirectionsRenderer();


    geocoder = new google.maps.Geocoder();

    geocoder.geocode({
        'address': to_address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            to_pos = results[0].geometry.location;
        }
    });

    var myOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: to_pos
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions'));

    var control = document.getElementById('d_options');

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            var infowindow = new google.maps.Marker({
                position: pos,
                map: map,
                title: "You"
            });

            map.setCenter(pos);
            $('#from').val(pos);
            $('#d_options').trigger('collapse');
            calcRoute();

        }, function () {
            handleNoGeolocation(true);
        });
    }
}

function calcRoute() {
    var start = document.getElementById('from').value;
    var end = to_address;
    $('#results').show();
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}


google.maps.event.addDomListener(window, 'load', initialize);

地理編碼使用異步請求。 您必須在geocode()的回調中創建標記

geocoder.geocode({
        'address': to_address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var to_pos = results[0].geometry.location;

            new google.maps.Marker({
                position: new google.maps.LatLng(to_pos.lat(),to_pos.lng()),
                map: map,
                title: "Destination"
            });
        }
    });

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM