Question

我刚开始使用google-maps-api，我觉得它很棒。然而，在我对谷歌地图掌握的过程中，我遇到了一个障碍，希望你们可以提供帮助。在google maps tutorial之后，将js代码放入单独的文件中。但是当我试图将代码分解为几个辅助方法时，地图不会渲染。 Google Map not Rendering. 我想知道页面加载是否存在潜在错误，无论如何我已经包含了我的helper.js和map.js代码。任何提示或建议来解决这个问题将不胜感激。谢谢！

以下是我的助手功能：

/**
* HELPER CLASS for google map api
* Contains helpful methods for use in google maps
* By: Christian Wang
* Version 1.0
**/

/**
* Takes a geocoder object and returns the address in an array of latitude, longitude
**/
function codeAddress(geocoder, address) {
var latlng = [];
geocoder.geocode({
    'address': address
}, function(results, status) {
    if (status == "OK") {
      latlng[0] = results[0].geometry.location.lat();
      latlng[1] = results[0].geometry.location.lng();
    } else {
      console.log('Geocode was not successful for the following reason: ' + 
status);
    }
  });
   return latlng;
}

/**
* Reverse geocodes an array of latitude, longitude and returns an address
**/
function getAddress(geocoder, latlng) {
  var address = "";
  geocoder.geocode({
      'location': latlng
    },
    function(results, status) {
      if (status == "OK") {
        address = results[0].formatted_address;
      } else {
        console.log('Geocode was not successful for the following reason: ' 
+ status);
      }
    });
  return address;
}

/**
 * Moves the map to the current location and sets the zoom level
 **/
function setLocation(geocoder, map, location, zoom) {
  //Check if the location is an address or an array of latitude, longitude
  if (typeof location === "string") {
    //Check if geocoder is undefined
    if (geocoder) {
      map.setCenter(codeAddress(geocoder, location));
    } else {
       console.log('Geocode object is undefined');
    }
  } else {
     map.setCenter(location);
  }

  //Check if zoom is undefined
  if (zoom) {
    map.setZoom(zoom);
  } else {
    console.log('Zoom is undefined');
  }
}
/**
 * Adds a marker on a given map at a given location
 **/
function addMarker(geocoder, map, location) {
  //Check if the location is an address or an array of latitude, longitude
  if (typeof location === "string") {
    var marker = new google.maps.Marker({
      position: codeAddress(geocoder, location),
      title: "Home",
      map: map,
      visible: true
    });
  } else {
    var marker = new google.maps.Marker({
      position: location,
      title: "Home",
      map: map,
      visible: true
    });
  }
}

这是我的主要地图类：

/**
* MAP CLASS for transportation app
* Manages the rendering and event handling of google maps
* By: Christian Wang
* Version 1.0
**/
function initMap() {
  var geocoder, map; // Create new geocoder and map objects
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById('map'), {
    center: codeAddress(geocoder, "34 Bracknell Avenue, Markham, ON, Canada, L6C0R3")
  });
  setLocation(geocoder, map, "34 Bracknell Avenue, Markham, ON, Canada, L6C0R3", 4);
  addMarker(geocoder, map, "34 Bracknell Avenue, Markham, ON, Canada, L6C0R3");

}

Answer 1

如果没有zoom，它将无法呈现。我不知道你的其余代码，但是

map = new google.maps.Map(document.getElementById('map'), {
  center: codeAddress(geocoder, "34 Bracknell Avenue, Markham, ON, Canada, L6C0R3")
});

应该看起来像

map = new google.maps.Map(document.getElementById('map'), {
  center:codeAddress(geocoder, '34 Bracknell Avenue, Markham, ON, Canada, L6C0R3'), zoom:8)
});

谷歌地图渲染问题？

1 个答案: