Question

我正在尝试找出谷歌地图API的问题，并在其网站上列出了免费套餐支持。

我正在为网站编写一个javascript，以便访问者可以选择访问该网站的位置，无论是机场还是乔治华盛顿大桥（这是在纽约）。我正在尝试为用户提供一个选项，以便将其当前位置用于方向而不是地标。我在网上看到的每种类型的代码都会导致返回一个空白页面。我试图让javascript工作有点像https://www.google.com/maps?saddr=My+Location&daddr=161+Fort+Washington+Avenue+New+York+NY+10032但不是嵌入式（出于某种原因，我的服务器ID在打开谷歌地图api之后给了我一个嵌入错误）。这是我现在的工作代码，

  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      #right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
  }

  #right-panel select, #right-panel input {
    font-size: 15px;
  }

  #right-panel select {
    width: 100%;
  }

  #right-panel i {
    font-size: 12px;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
    float: left;
    width: 70%;
    height: 100%;
  }
  #right-panel {
    margin: 20px;
    border-width: 2px;
    width: 20%;
    float: left;
    text-align: left;
    padding-top: 20px;
  }
  #directions-panel {
    margin-top: 20px;
    background-color: #FFEE77;
    padding: 10px;
  }
</style>

 <div id="map"></div>
    <div id="right-panel">
    <div>
    <b>Start:</b>
    <select id="start">
 <option value="fort lee, new jersey">Fort Lee</option>
<option value="Newark Internation Airport">Newark International Airport</option>
<option value="JFK international airport">JFK international Airport</option>
<option value="Laguardia International Airport">Laguardia International Airport</option>
<option value="Goerge Washington Bridge">George Washington Bridge</option>
<option value="Lincon Tunnel">Lincoln Tunnel</option>
</select>
<br>
<b>End:</b>
<select id="end">
    <option value="fort lee, new jersey">Fort Lee</option>
<option value="Newark Internation Airport">Newark International Airport</option>
<option value="JFK international airport">JFK international Airport</option>
<option value="Laguardia International Airport">Laguardia International Airport</option>
<option value="Goerge Washington Bridge">George Washington Bridge</option>
<option value="Lincon Tunnel">Lincoln Tunnel</option>
</select>
<br>
  <input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>
<script>

  function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer({
      draggable: true,
      map: map,
      panel: document.getElementById('right-panel')
    });
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: {lat: 40.7127, lng:-74.0059}
    });
    directionsDisplay.setMap(map);

    document.getElementById('submit').addEventListener('click', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    });
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {

    directionsService.route({
      origin: document.getElementById('start').value,
      destination: document.getElementById('end').value,
      travelMode: google.maps.TravelMode.DRIVING, 
avoidTolls: true
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        var route = response.routes[0];
        var summaryPanel = document.getElementById('directions-panel');
        summaryPanel.innerHTML = '';
        // For each route, display summary information.
        for (var i = 0; i < route.legs.length; i++) {
          var routeSegment = i + 1;
          summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
              '</b><br>';
          summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
          summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
          summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
        }
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=(APIKEY)&callback=initMap&sensor=true">
</script>

终点将最终转换为带有文本元素的单选按钮，但我遇到的一个问题是获取html / javascript以获取用户位置而不显示白屏。如果我将驾驶模式改为RECOMMENDED则不会显示。推荐似乎是地图网站的默认设置。我也不确定脚本中的免费通行费标志是否有效。

希望我提供了足够详细的信息，我还没有用HTML编写一段时间，而且我的javascript培训充其量只是最小的。

在Google API示例中查找位置的脚本是：

 if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Location found.');
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }

并且单独工作正常但是当我使用pos.lat和pos.lng作为起点将其与其他代码复合时，窗口是空白的。我也尝试了Get Current Location On Google Map和How to get Client location using Google Maps API v3?的建议，但是当我将javascript用于位置放置到脚本标记时，我正在测试的窗口是空白的。我有一种感觉，我在做一些简单的错误。

谷歌地图用户位置问题javascript问题

0 个答案: