首页 文章

Google Map API使用LatLng或地址

提问于
浏览 次
-1

我正在使用Javascript在我的网站上呈现嵌入式Google Map画布 .

渲染的输入是从数据库中检索的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
  } ?>
});
javascript php google-maps google-maps-api-3

1 回答

  • 0

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

    因为它更快地执行，并且对初始化函数尚未设置的变量（如map）起作用，所以地理编码回调中的代码可能在尝试更改 Map 中心和设置标记坐标时导致错误 .

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

    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();
}

    例如：http://jsfiddle.net/j7pb7w3d/2/

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

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

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

    回复于

相关问题