Question

我正在使用Javascript在我的网站上呈现嵌入式Google地图画布。

渲染的输入是从数据库中检索的lat / lng坐标。但是，如果lat / lng返回null，则映射将根据从数据库中检索的相应地址字符串进行渲染。以下脚本始终正确呈现lat / lng坐标输入，但不适用于地址输入。奇怪的是，当我多次刷新页面时，地址输入将随机工作。我试图减少这种随机性。我觉得我很接近，但我似乎无法找到缺失的链接。

注意：如果lat / lng为null，则默认值应用于$ lat和$ lng，因此它不会弄乱下面的JS。

如果有人能告诉我导致随机呈现地址字符串的下面代码有什么问题，我将不胜感激。

var map;
var marker;
var geocoder;

function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
  var estLatLng = new google.maps.LatLng( <? php echo $lat; ?> , <? php echo $lng; ?> );

  var mapOptions = {
    center: estLatLng,
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: false,
    streetViewControl: true,
    scrollwheel: false
  }
  map = new google.maps.Map(mapCanvas, mapOptions);
  marker = new google.maps.Marker({
    position: estLatLng,
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP,
    title: "<?php echo $name;?>"
  });
}

function toggleBounce() {
  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

<? php
} ?>
$(".navbar").load("navbar.html", function() {
  $("#navbarrestaurants").addClass("active");
});

$(document).ready(function() { <? php
  if ($calcAddress) { ?> // this chunk of code is not loaded if lat/lng is not null
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': "<?php echo $address;?>",
      'componentRestrictions': {
        country: 'Singapore'
      }
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    }); <? php
  } ?>
});

Answer 1

我相信你的问题是你的初始化函数（监听窗口加载）之前正在执行$（document）.ready中的代码。页面完全加载后会调用load事件，包括图像等，而当DOM准备就绪时，文档就绪块中的所有内容都会稍早调用。

因为它更快地执行，并且对地图之类的变量起作用，而初始化函数还没有设置，地理编码回调中的代码可能会在尝试更改地图中心时导致错误设置标记坐标。

初始化地图后尝试执行地理编码代码。即：将其包装在自己的函数中，并在初始化函数结束时调用它。

function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
  var estLatLng = new google.maps.LatLng( <? php echo $lat; ?> , <? php echo $lng; ?> );

  var mapOptions = {
    center: estLatLng,
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: false,
    streetViewControl: true,
    scrollwheel: false
  }
  map = new google.maps.Map(mapCanvas, mapOptions);
  marker = new google.maps.Marker({
    position: estLatLng,
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP,
    title: "<?php echo $name;?>"
  });

  codeAddress();
}

ex：http://jsfiddle.net/j7pb7w3d/2/

然而，这并不是很好，因为地图以其默认中心开始，然后在一秒钟之后明显地猛然移动到新地址。

相反，您可以先确定是否需要进行地理编码，然后在加载地图之前执行此操作，然后在首次创建地图时使用结果设置地图中心和标记。例如：http://jsfiddle.net/qsefxu5q/2/

请注意，这些示例并不完美，需要根据您的需要进行更改。希望他们能给你一些想法。

Google Map API使用LatLng或地址

1 个答案: