Question

这是我的第一个HTML / Javascript项目，我遇到了一些麻烦。我们的目标是获取一个地址，并在该地址500米范围内的商店中显示带有标记的地图。问题是我得到一个空白页面;什么都没有显示出来。大部分代码都是从Google的示例中逐字复制的，所以我不知道会出现什么问题。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Make a Good Impression</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=myKeyGoesHere"></script>    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
    <script type="text/javascript" src="coffee_and_donuts.js"></script>
  </head>
  <body>
      <div id="map" style="float:left;width:30%;height 100%"></div>
  </body>
</html>

coffee_and_donuts.js：

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var geocoder = new google.maps.Geocoder();
var DESTINATION_ADDRESS = "New York, New York";
var destination_LatLng;


// get the destination's LatLng object
geocoder.geocode( {'address': DESTINATION_ADDRESS}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK)
  {
      destination_LatLng = results[0].geometry.location;
  }
});


// feed the destination's LatLng object to the places API to find the nearest stores

var map;
var service;
var infowindow;

function initialize2() {
  map = new google.maps.Map(document.getElementById('map'), {
      center: destination_LatLng,
      zoom: 15
    });

  var request = {
    location: destination_LatLng,
    radius: '500',
    types: ['store']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

initialize2();

Answer 1

您需要在地理编码功能回调中调用initialize2();：

// get the destination's LatLng object
    geocoder.geocode( {'address': DESTINATION_ADDRESS}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK)
      {
          destination_LatLng = results[0].geometry.location;
          initialize2();
      }
    });

问题是您在地理编码器完成之前尝试初始化地图。

您也可以将这一切都放在一个链接中：

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

地图未在网页上显示（Google Maps / Places API）

1 个答案: