Question

首次使用谷歌地图API。我试图打开谷歌地图，点击弹出窗口内的按钮，通过地址而不是纬度和经度。

我能够解决以下代码传递lat和long的问题。

 $(function () {
        $("#btnmap").click(function () {
           // debugger;
            $("#dialog").dialog({
                modal: true,
                title: "Location",
                width: 600,
                height: 450,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                open: function () {
                    //debugger;
                    var mapOptions = {
                        center: new google.maps.LatLng(34.095131, -84.258404),
                        zoom: 18,
                        mapTypeId: google.maps.MapTypeId.ROADMAP

                    }
                   // debugger;
                    var map = new google.maps.Map($("#canvasMap")[0], mapOptions);
                }
            });
        });
    });

我知道我需要使用地理编码代替地址或协调。并尝试使用以下脚本

 function initialize() {
        debugger;
        var map = new GMaps({
            lat: 0,
            lng: 0,
            zoom: 0
        });

        GMaps.geocode({
            address: $("#lblOfficeAddress").text(),
            callback: function (results, status) {
                alert(address);
                if (status == 'OK') {
                    var latlng = results[0].geometry.location;
                    map.fitBounds(results[0].geometry.viewport);
                    map.addMarker({
                        lat: latlng.lat(),
                        lng: latlng.lng()
                    });
                }
            }
        });
    }
google.maps.event.addDomListener(window, "load", initialize);

但不确定如何将这两者结合起来打开地图。非常感谢帮助。谢谢！

Answer 1

在open功能中，不是设置地图的center和zoom属性，而是调用地理编码器，然后使用结果设置地图中心。

var geocoder = new google.maps.Geocoder();
geocoder.geocode({
  address: $("#lblOfficeAddress").text()}, function(results, status) {
  if (status == "OK") {
      console.log("location=" + results[0].geometry.location.toUrlValue(6));
      map.setCenter(results[0].geometry.location);
      map.setZoom(18);
  } else alert("Geocode failed, status=" + status);
});

proof of concept fiddle

代码段

$(function() {
  $("#btnmap").click(function() {
    // debugger;
    $("#dialog").dialog({
      modal: true,
      title: "Location",
      width: 600,
      height: 450,
      buttons: {
        Close: function() {
          $(this).dialog('close');
        }
      },
      open: function() {
        //debugger;
        var mapOptions = {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        // debugger;
        var map = new google.maps.Map($("#canvasMap")[0], mapOptions);

        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
          address: $("#lblOfficeAddress").text()
        }, function(results, status) {
          if (status == "OK") {
            map.setCenter(results[0].geometry.location);
            map.setZoom(18);
          } else alert("Geocode failed, status=" + status);
        });
      }
    });
  });
});

html,
body,
#canvasMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<button id="btnmap">MAP</button>
<div id="dialog">
  <div id="canvasMap"></div>
</div>
<div id="lblOfficeAddress">
  13560 Morris Rd, Alpharetta, GA 30004, USA
</div>

在jQuery对话框模式弹出窗口中显示谷歌地图，传递地址

1 个答案: