Question

我的页面上有一个元素，我已将ID'地址'分配给：

<p id="address">1600 Pennsylvania Ave NW, Washington, DC 20500, United States</p>

现在我正尝试使用以下内容创建Google地图：

<script type="text/javascript">
  var gecoder, map;
  var address = document.getElementById('address').innerHTML;
  function googlemap(address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var myOptions = {
        zoom: 8,
        center: results[0].geometry.location,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

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

然而，这没有任何回报。我得到一个空白。知道我做错了吗？

Answer 1

这就是我所做的，它的工作原理。头脑中的JavaScript：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" />
<script type="text/javascript">
    var geocoder, map;

    function googlemap() {
        var address = document.getElementById('address').innerHTML;

        geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var myPosition = results[0].geometry.location;
                alert(myPosition);

                var myOptions = {
                    zoom: 8,
                    center: myPosition,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById('map'), myOptions);

                var marker = new google.maps.Marker({
                    map: map,
                    position: myPosition
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
</script>

身体：

<body onload="googlemap()">
<form id="form1" runat="server">
<div>
    <p id="address">1600 Pennsylvania Ave NW, Washington, DC 20500, United States</p>
    <div id="map" style="overflow:hidden; width:400px; height:400px"></div>
</div>
</form>

从HTML元素中检索地址并使用它创建Google Map

1 个答案: