php - Google Map API v3 - (1) map 暂时闪烁错误的地理编码 (2) 添加标记点击事件

Question

我已经成功地尝试/错误地组合了一个有效的 google v3 api，对来自数据库的地址进行地理编码。

现在我正在努力完成最后两项任务:

1. map 会闪烁原始地理编码 (34.05,-118.24)，该编码是在 api 对我传递给它的变量进行地理编码之前设置的。当我删除这个纬度/经度时， map 根本不起作用。在对我提供的地址进行地理编码之前，如何阻止 map 闪烁原始纬度/经度？
2. 我希望用户能够单击标记并获得结果(即“Hello World”)。到目前为止，经过反复试验，我还无法成功使标记可点击。

请帮忙!!一如既往地提前致谢。

$address, $city, $state and such are php variables coming from mysql

我的谷歌脚本如下所示:

<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 = '<?php echo $address.', '.$city.', '.$state; ?>';

                var myOptions = {
                  zoom: 14,
                  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);
                    var marker = new google.maps.Marker({
                        map: map, 
                        position: results[0].geometry.location
                    });
                  } else {
                    alert("Geocode was not successful for the following reason: " + status);
                  }
                });
              }


            </script>

Answer 1

因此，要使标记可点击，您需要在其上有一个事件监听器。此外，您还需要一个信息窗口来显示您的“hello world”。这两者都可以，将其添加到您的初始化函数中。

var marker = new google.maps.Marker({
    map: map, 
    position: results[0].geometry.location
});

var infowindow =  new google.maps.InfoWindow({
    content: 'Hello World!',
    map: map
});

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, this);
});

我还会考虑在创建 map 之前对您的地址进行地理编码，这样您就可以使用 results[0].geometry.location 来初始设置 map 中心。

      var geocoder;
      var map;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(34.052234,-118.243685);
        var address = '<?php echo $address.', '.$city.', '.$state; ?>';
        var myOptions = {
          zoom: 14,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            myOptions.center = results[0].geometry.location;

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                map: map, 
                position: results[0].geometry.location
            });

            var infowindow =  new google.maps.InfoWindow({
                content: 'Hello World!',
                map: map
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, this);
            });

          } else {
            alert("Geocode was not successful for the following reason: " + status);

            // just open the map at the default latlng
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          }
        });
      }