0

I have the following code in my page (based at the moment around the google examples. I have however hit a snag, i can't seem to make places work (the markers wont show), this is my code . . . it should show all cafes, restaurants and dars within 10km's of the users location with geolocation, it also gives directions to Darwin in Australia from the users current position.

this is the code: 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Directions Complex</title>
    <style>

    html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

  #map_canvas {
    height: 650px;
  }

      #directions-panel {
        height: 100%;
        float: right;
        width: 390px;
        overflow: auto;
      }

      #map-canvas {
        margin-right: 400px;
      }

      #control {
        background: #fff;
        padding: 5px;
        font-size: 14px;
        font-family: Arial;
        border: 1px solid #ccc;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
      }

      @media print {
        #map-canvas {
          height: 500px;
          margin: 0;
        }

        #directions-panel {
          float: none;
          width: auto;
        }
      }

.gmnoprint {display:none;}
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
    <script>
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var a;
      var b;
      var latandlon;

      function initialize()
       {
        navigator.geolocation.getCurrentPosition(create_a_var);
       }

      function create_a_var(position)
       {

        a = position.coords.latitude;

        b = position.coords.longitude;

        latandlon = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        loadmapscript();

       }

      function loadmapscript() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapOptions = {
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: new google.maps.LatLng(a, b),
          disableDefaultUI: true
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));

        var control = document.getElementById('control');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP].push(control);

        var request = {
        location: latandlon,
        radius: 10000,
        types: ['bar', 'restaurant', 'cafe']
        };


      }

      function calcRoute() {
        var start = latandlon;
        var end = "Darwin, NT, Australia";
        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);
          }
        });
      }

      function createMarker(place) {
      var placeLoc = place.geometry.location;
      var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
      });

      google.maps.event.addListener(marker, 'click', function() {
      alert(place.name);
      });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="control">
      <strong>Start:</strong>
      <button id="start" onclick="calcRoute();">Click Me Please :)</button>
    </div>
    <div id="directions-panel"></div>
    <div id="map_canvas"></div>
  </body>
</html>

var directionDisplay; var directionsService = new google.maps.DirectionsService(); var a; var b; var latandlon; var map; function initialize() { navigator.geolocation.getCurrentPosition(create_a_var); }

  function create_a_var(position)
   {

    a = position.coords.latitude;

    b = position.coords.longitude;

    latandlon = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    loadmapscript();

   }

  function loadmapscript() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(a, b),
      disableDefaultUI: true
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));

    var control = document.getElementById('control');
    control.style.display = 'block';
    map.controls[google.maps.ControlPosition.TOP].push(control);

    var request2 = {
    location: latandlon,
    radius: 10000,
    types: ['bar', 'restaurant', 'cafe']
    };

  }

  function calcRoute() {
    var start = latandlon;
    var end = "Darwin, NT, Australia";
    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);
      }
    });
  }

  function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
  map: map,
  position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
  alert(place.name);
  });
  }

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

1 回答 1

2

'map' 是 loadmapscript 函数的局部变量。然后，您尝试在您的 createMarker 函数中引用它，该函数无权访问该变量。改为将 map 设为全局变量。

在此处删除 TravelMode 行末尾的尾随逗号。这将在 Internet Explorer 上引发错误：

 var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING,
        };

您有一个 createMarker 函数，但您的代码中没有任何内容调用该函数....因此没有标记。

于 2012-10-12T10:38:54.333 回答