谷歌地图APIv3 -通过地理代码添加标记

Google Maps APIv3 - adding markers via geocode

本文关键字:代码 添加 加标记 APIv3 -通 谷歌地图      更新时间:2023-09-26

所以我有这个脚本,我试图添加标记到我用Javascript创建的地图。我想我很接近正确(是的,正确),但我不确定我做错了什么,我似乎无法破译我得到的错误。

我做的第一件事就是将google API密钥添加到我的站点。

然后,我在脚本中做的第一件事是加载搜索和映射api:
(function ($) {
  $("document").ready(function() {
    google.load("maps", 2, {"callback": mapsLoaded});
  });
})(jQuery);

在'maps' API加载后,maploaded方法被调用:

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。

有人知道我做错了什么吗?

首先,Google Maps API 3不需要API密钥(除非我们指的是最近为每日地图浏览量超过25,000的网站引入的密钥,这可能需要付费使用)。听起来你把API 2所需的键和API 3的代码混在了一起。

其次,这些都是错误的。'i'是邮政编码数组的变量,它与结果数组

没有关系。
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