Question

我做了一个简单的GoogleMap，它回复script.php?q=canada并显示地图。

一个问题是它总是加载中心var latlng = new google.maps.LatLng(34.052234,-118.243685);的地图一秒钟，然后加载正确的地图。

我的代码出了什么问题？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title><?=$_GET['q']?></title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript">
              var geocoder;
              var map;
              function initialize() {
                geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(34.052234,-118.243685);
                var address = '<?=$_GET['q']?>';

                var myOptions = {
                  zoom: 10,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                geocoder.geocode( { 'address': address}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                  map.setCenter(results[0].geometry.location);
                  // autozoom
                  map.fitBounds(results[0].geometry.viewport);
                    var marker = new google.maps.Marker({
                        map: map, 
                        position: results[0].geometry.location,
                        title: 'by Quick Maps',
                        clickable: false
                    });
                  } else {
                    alert("Geocode was not successful for the following reason: " + status);
                  }
                });
              }
            </script>
 </head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

Sidequestion： 如何用地图上的简单信息替换alert("Geocode was not successful for the following reason: " + status);？

Answer 1

1）谷歌地图初始化到一个位置，然后你告诉另一个位置。所以你有两个选择：

a)Move the map instantiation into the geocode callback.
b)Initialize to the location you want.  To do this you will need to read a bit more about how google maps works instead of just using their basic example.

2）至于好的错误信息而不是磨蚀警报，请将其添加到您的html。

<p id="errorMessage" style="display:none;">Sorry, couldn't find that address</p>

然后显示它而不是警告。

} else {

    // alert("Geocode was not successful for the following reason: " + status);
    document.getElementById('errorMessage').style.display = "block";               
}

Google地图在其最新版本中确实有一些不错的叠加层，但它主要围绕地图上的位置和区域范围 - 而不是一般文本信息。所以你看，你需要在地图之外，在它上面或下面的HTML页面上创建自己的UI。如果您确实想在地图上显示它，可以在errorMessage div上设置以下css属性：

#errorMessage {
    position:absolute;
    left: 50%;
    top: 30%;
}

Answer 2

快速回答是将地图实例化移动到地理编码回调中。

 geocoder.geocode( { 'address': address}, function(results, status) {
  var myOptions = {
                  zoom: 10,
                  center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      ...
  });

这会阻止地图以34.052234，-118.243685为中心显示。

关于没有返回结果的用户体验，您可以隐藏地图并显示一些文字，例如？

document.getElementById('map_canvas').style.display = 'none';
document.getElementsByTagName('body')[0].innerHTML = 'Geocode was not successful for the following reason: " + status;

但是你想要做的事情应该高度依赖于解决方案的一般用户界面：）

简单的谷歌地图与地理编码

2 个答案: