如何显示位置的谷歌地图(例如:亚特兰大，GA)选择的用户在上一页

How to display google map of location (Ex: Atlanta, GA) chosen by user on previous page

本文关键字：选择 GA 一页 用户 亚特兰大 例如 何显示 显示 位置 谷歌地图      更新时间：2023-09-26

请看下面设置为纵向和纵向的简单谷歌地图示例。此代码可以用于此目的，但需要php echo的City, State由用户选择，以代替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()">

代码是从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>
相关文章：