Question

我最初通过Google Maps API设置直接服务的来源和目的地没有任何问题。（我的代码如下）。但是，如何在页面加载后动态更改这些值，以便我的网站访问者可以继续输入各种来自/到他们在表单字段中输入的点...？

function directions(map) {
/*EXTENDED GOOGLE MAP DIRECTIONS*/

var from = '12345 New York, NY'; 
var to =  '12345 Indianapolis, IN';

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));

var directionsRequest = {
  origin: from,
  destination: to,
  travelMode: google.maps.DirectionsTravelMode.DRIVING,
  unitSystem: google.maps.UnitSystem.METRIC
};

directionsService.route(
  directionsRequest,
  function(response, status)
  {
    if (status == google.maps.DirectionsStatus.OK)
    {


      new google.maps.DirectionsRenderer({
        map: map,
        directions: response
      });
            directionsDisplay.setDirections(response);
            }
    else
      $("#error").append("Unable to retrieve your route<br />");
  }
);
/**/
}

function initialize() {
/*GOOGLE MAP API V3*/
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);  

var mapOptions = {
zoom            : 17,
center          : new google.maps.LatLng(39.868041, -86.145084),
mapTypeId       : google.maps.MapTypeId.HYBRID,
backgroundColor : '#333'
};

var marker = new google.maps.Marker({
position: mapOptions.center,
map: map,
title: 'My Location'
});

//my extended directions for my map
directions(map);

setTimeout(function(){$('base').prevAll().remove();}, 1000);
/**/
}

function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=initialize';
document.body.appendChild(script);
}

$(window).load(function(){
loadScript();
});

Answer 1

以下Google地图设置允许我最初使用起点标记加载我的地图。然后，如果Web用户决定提交原点，则该数据将被发送到directionService以进行计算并最终显示。我也将驾驶步骤加载到面板中。我希望这对需要设置和重新计算出发点和目的地点的人有所帮助：

使用您的API密钥调用Google地图

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

然后使用以下内容......

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
/*INITIALIZE GOOGLE MAPS V3*/
  directionsDisplay = new google.maps.DirectionsRenderer();
  var npcc = new google.maps.LatLng(39.868041, -86.145084);
  var mapOptions = {
    zoom             : 17,
    center         : npcc,
    mapTypeId      : google.maps.MapTypeId.HYBRID,
    backgroundColor:'#333'
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);  

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

    var marker = new google.maps.Marker({
    position: mapOptions.center,
    map: map,
    title: 'My initial starting point'
    });

    //remove all unnecessary styles from Google Maps v3
    setTimeout(function(){$('base').prevAll().remove();}, 1000);
/**/
}


function calcRoute() {
/*CALCULATE AND DISPLAY ROUTE DATA*/
    var from = $('#from').val();
    var to = '6202 N Carrollton Ave, Indianapolis';
    var directionsRequest = {
        origin: from,
        destination: to,
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC
    };

  directionsService.route(directionsRequest, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
    else {
    console.log("Unable to retrieve your route<br />");
      }
  });
/**/
}

function getRoute() {
/*ON HTML FORM SUBMIT, PROCESS ROUTE DATA*/
  $('#coming-from').submit(function(e){
  e.preventDefault();
  calcRoute();
  });
 /**/   
 }

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

$(window).load(function(){ 
  getRoute();
});

Google Maps API V3 - 如何更改Direction Service的起点和终点

1 个答案: