Question

请参阅下面设置为Lat和Long的简单Google地图示例。此代码可以用于此目的，但需要用户选择的City，State的php echo来代替Lat Long。任何人都可以概述代码来执行此操作吗？想要与Google Maps API v3兼容。非常感谢。

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"

      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>

    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>

  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

过去，我使用以下代码显示City，State：

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=BQIAAAAmGS6pKWpRUcdw4oR9pzpvBQzjcAJnzRmzqULnEw6fdi4mPoYnxR1kxeM4lTW9o75OG9vfiUP8DKkig" type="text/javascript"></script>    
    <script type="text/javascript">
    var map = null;
    var geocoder = null;
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setMapType(G_HYBRID_MAP);
        disableDefaultUI: true;
        map.enableScrollWheelZoom();
        geocoder = new GClientGeocoder();
      }
        showAddress("<?php echo $_SESSION['city_name']; ?>");
    }
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
            //alert(address + " not found");
            } else {
            map.setCenter(point, 13);
            map.setZoom(13);
            }
          }
        );
      }
    }
</script>

</head>

<body onload="initialize()" onunload="GUnload()">

Answer 1

代码是从geocode-with-google-maps-api-v3复制并重新组织的，因此它应该看起来像旧代码。

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&sensor=false"></script>
    <script type="text/javascript">
        var geocoder;
        var map;
        var marker;

        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            geocoder = new google.maps.Geocoder();
            marker = new google.maps.Marker({
                map: map,
                draggable: true
            });

            showAddress('Ljubljana');
        }

        function showAddress(address) {
            geocoder.geocode({'address': address}, function(results, status) {
                if (status != google.maps.GeocoderStatus.OK) {
                    return;
                }
                if (results.length > 1) {
                    alert('Multiple addresses found; showing first one ...');
                }
                $.each(results, function(i, item) {
                    var location = new google.maps.LatLng(item.geometry.location.lat(), item.geometry.location.lng());
                    marker.setPosition(location);
                    map.setCenter(location);
                    return false;
                });
            });
        }
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

如何在上一页显示用户选择的谷歌地图（例如：亚特兰大，乔治亚州）

1 个答案: