Question

我设法试用/错误整理了一个正在运行的google v3 api，它对来自数据库的地址进行地理编码。

现在我正在努力完成两项最终任务：

地图闪烁原始地理编码（34.05，-118.24），该地理编码是在api对我传递给它的变量进行地理编码之前设置的。当我删除此lat / long时，地图根本不起作用。在对我提供的地址进行地理编码之前，如何阻止地图闪烁原始纬度/经度？
我希望用户能够点击标记并获得结果（即“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

因此，要使标记可单击，您需要在其上设置事件侦听器。此外，您还需要一个信息窗口来显示您的“你好世界”。这样做，将它添加到初始化函数中。

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

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

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

谷歌地图API v3 - （1）地图暂时闪烁坏地理编码（2）添加标记点击事件

1 个答案: