0

我试图让谷歌地图js代码在外部运行......无济于事 - 只是一个空白的div。

这是代码 - HTML：

    <script type="text/javascript" src="js_plugins/jquery.googleMaps.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

    <div id="googleMaps_content">
      <form id="googleMaps_form" action="" onSubmit="calcRoute(); return false;">
        <input id="googleMaps_originInput" type="text" value="" />
        <input id="googleMaps_directionsBtn" type="submit" value="Calcular itinerário" />
      </form>
      <div id="googleMaps_map" style="width: 100%; height: 220px;"></div>
      <div id="googleMaps_directions"></div>
    </div> <!-- End of id="googleMaps_content" -->

...和JS（js_plugins/jquery.googleMaps.js）：

$(document).ready(function(){

  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();

  function initialize(){

    var latlng = new google.maps.LatLng(40.080645,-8.320526);

    directionsDisplay = new google.maps.DirectionsRenderer();

    var mapOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_RIGHT
      }

    };

    var map = new google.maps.Map(document.getElementById("googleMaps_map") ,mapOptions);

    directionsDisplay.setMap(map);

    directionsDisplay.setPanel(document.getElementById("googleMaps_directions"));

    var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title: "NOVA PLAQUEMAR, Mundo de Pedra"
    }); 

  }

  function calcRoute(){

    var start = document.getElementById("googleMaps_originInput").value;

    var end = "40.080645,-8.320526";

    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);
      } else {
        if (status == 'ZERO_RESULTS'){
          alert('Não foi encontrado nenhum intinerário entre o ponto de partida a origem e o destino.'); // No route could be found between the origin and destination.
        } else if (status == 'UNKNOWN_ERROR'){
          alert('O pedido de direcções não pode ser processado devido a um erro do servidor. O pedido pode ser bem sucedido se o fizer outra vez.'); // A directions request could not be processed due to a server error. The request may succeed if you try again.
        } else if (status == 'REQUEST_DENIED'){
          alert('Esta página não tem permissão para usar o srviço de direcções.'); // This webpage is not allowed to use the directions service.
        } else if (status == 'OVER_QUERY_LIMIT'){
          alert('A página ultrapassou o limite de pedidos num período de tempo demasiado curto.'); // The webpage has gone over the requests limit in too short a period of time.
        } else if (status == 'NOT_FOUND'){
          alert('Não foi possível fazer o geocode de pelo menos um dos parâmetros: origem, destino ou itinerário.'); // At least one of the origin, destination, or waypoints could not be geocoded.
        } else if (status == 'INVALID_REQUEST'){
          alert('O pedido de direcção providenciado é inválido.'); // The DirectionsRequest provided was invalid.         
        } elsez{
          alert("Houve um erro no seu pedido. Informação do pedido: \n\n"+status); // There was an unknown error in your request. Requeststatus: ...
        }
      }
    });

  }

  initialize();

});

这可能是一件很无聊的事情。:P

佩德罗

4

2 回答 2

2

  1. 您的 jquery.googlemaps 应该在地图之后。

  2. 在最后一个条件下将 elsez 更正为 else：

改变

} elsez{
          alert("Houve um erro no seu pedido. Informação do pedido: \n\n"+status); // There was an unknown error in your request. Requeststatus: ...
        }

至

} else{
          alert("Houve um erro no seu pedido. Informação do pedido: \n\n"+status); // There was an unknown error in your request. Requeststatus: ...
        }

这将工作:)

于 2013-07-15T12:41:24.747 回答
0

你 jquery.googlemaps 应该在地图之后，否则它会在它存在之前尝试使用它。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js_plugins/jquery.googleMaps.js"></script>

<div id="googleMaps_content">
  <form id="googleMaps_form" action="" onSubmit="calcRoute(); return false;">
    <input id="googleMaps_originInput" type="text" value="" />
    <input id="googleMaps_directionsBtn" type="submit" value="Calcular itinerário" />
  </form>
  <div id="googleMaps_map" style="width: 100%; height: 220px;"></div>
  <div id="googleMaps_directions"></div>
</div> <!-- End of id="googleMaps_content" -->
于 2013-07-15T12:39:20.583 回答