Google Map API use LatLng or Address

Google Map API use LatLng or Address

本文关键字:or Address LatLng use Map API Google      更新时间:2023-09-26

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

渲染的输入是从数据库中检索的纬度/LNG 坐标。但是,如果 lat/lng 返回 null,则地图将根据从数据库中检索到的相应地址字符串进行渲染。以下脚本始终正确呈现纬度/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
  } ?>
});

我相信

你的问题是 $(document).ready 中的代码在你的初始化函数(侦听窗口加载)中之前被执行。一旦页面完全加载,包括图像等,就会调用 load 事件,而当 DOM 准备就绪时,文档就绪块中的所有内容都会稍早调用。

由于初始化函数会更快地执行该回调,并且会

根据尚未设置的变量(如 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/

然而,这并不是很好,因为地图从其默认中心开始,然后在一秒钟后明显地抽搐到新地址。

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

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