Question

所以我有这个脚本，我正在尝试将标记添加到我用Javascript创建的地图中。我认为我已经接近正确（是的，正确的），但我不确定我做错了什么，我似乎无法破译我得到的错误。

我要做的第一件事就是将谷歌API密钥添加到我的网站。

然后，我在脚本中做的第一件事就是加载搜索并映射API：

(function ($) {
  $("document").ready(function() {
    google.load("maps", 2, {"callback": mapsLoaded});
  });
})(jQuery);

加载'maps'API后，将调用mapsLoaded方法：

function mapsLoaded() {
  //Create the options for the map and imediately after create the map.
  var myOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("result_map"), myOptions);

  showUserLocation(map);

  var image = '../misc/planbMarker.png';
  var postcodes = document.getElementsByClassName('result-postcode');
  var geocoder = new google.maps.Geocoder();
  for(var i = 0; i < postcodes.length; i++) {
    var address = postcodes[i].value;
    geocoder.geocode({'address': address}, function(results, status){
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
          map: map,
          position: results[i].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}

showUserLocation函数只获取用户的当前位置并将其放入地图中：

function showUserLocation(map) {
  //Define the user's initial location
  var initialLocation;
  //Define the variable to see if geolocation is supported.
  var browserSupportFlag =  new Boolean();
  // Try W3C Geolocation (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  // Browser doesn't support Geolocation
  } else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }
  function handleNoGeolocation(errorFlag) {
    if (errorFlag == true) {
      alert("Geolocation service failed. Defaulting to Aberdeen.");
      initialLocation = new google.maps.LatLng(57.149953,-2.104053);
    } else {
      alert("Your browser doesn't support geolocation. We've placed you in Aberdeen.");
      initialLocation = new google.maps.LatLng(57.149953,-2.104053);
    }
    map.setCenter(initialLocation);
  }
  //Put a marker on the user's current position different than the markers for the venues.
  navigator.geolocation.getCurrentPosition(function(position) {
    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
    map: map,
    title:"Hello World!"});
  });  
}

现在，我运行时遇到的错误是：Uncaught TypeError: Cannot call method 'appendChild' of null at maps:1后跟：Uncaught TypeError: Object #<Object> has no method '__gjsload__'，大约5秒后，这也会在javascript控制台中弹出：

Error in event handler for 'undefined': TypeError: Cannot call method 'postMessage' of null
at chrome/RendererExtensionBindings:100:18
at chrome-extension://bmagokdooijbeehmkpknfglimnifench/contentScript.js:128:13
at [object Object].dispatch (chrome/EventBindings:182:28)
at chrome/RendererExtensionBindings:99:24
at [object Object].dispatch (chrome/EventBindings:182:28)
at Object.<anonymous> (chrome/RendererExtensionBindings:149:22)

在旁注上，作为另一个可能的症状，当发生此错误时，Chrome会显示一个空白页面（如果您去查看源代码，那么标记就在那里，但页面是空白的）。我正在运行Drupal 7.10。

有没有人对我做错了什么有任何想法？

Answer 1

首先，Google Maps API 3不需要API密钥（除非我们引用最近推出的密钥，用于每日地图视图超过25,000的网站，可能需要支付使用费）。听起来您将API 2所需的密钥与API 3的代码混合在一起。

其次，这都是错的。 'i'是postcodes数组的变量，它与结果数组

无关

for(var i = 0; i < postcodes.length; i++) {
    var address = postcodes[i].value;
    geocoder.geocode({'address': address}, function(results, status){
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
          map: map,
          position: results[i].geometry.location

Google Maps APIv3 - 通过地理编码添加标记

1 个答案: