0

以下のコードは、ウェブサイトの前のページからユーザーが選択した都市、州を表示します。ただし、マップは最初に緯度経度の場所を読み込み、次に都市、州を開きます。読み込まれないように LatLong 変数を削除するにはどうすればよいですか? 都市、州を表示したいだけです。

<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('"<?php echo $_SESSION['city_name']; ?>"');
        }

        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>
4

1 に答える 1

0

探している特定の都市の緯度経度をいつでも見つけて、その地域が表示されるように適切なレベルにズームできます。それが私がそれを使用した方法です。

または、ジオコーダーの結果を使用して値を latlang に送信することもできます。そのため、マップを初期化する前に geocoder.geocode() を呼び出す必要があります。

コード内の次の行を使用します。

var location = new google.maps.LatLng(item.geometry.location.lat(), item.geometry.location.lng());

そして、これを後に配置します：

var latlng = location;

次に、latlng を使用してマップを初期化します。コードは次のようになります。

<script type="text/javascript">
    var geocoder;
    var map;
    var marker;

    function initialize() {

        /*Go through the following to understand what I'm trying to get at.*/
        var address = "<?php echo $_SESSION['city_name']; ?>";
        geocoder = new google.maps.Geocoder(); // This was removed from below. Compare with your code.
        geocoder.geocode( { 'address': address}, function(results, status) {

            if (status == google.maps.GeocoderStatus.OK) {
            var latlang = results[0].geometry.location; } 

            else { alert("The location cannot be mapped"); }
        });

        /* Up until here. */

        var mapOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        marker = new google.maps.Marker({
            map: map,
            draggable: true
        });

        showAddress('"<?php echo $_SESSION['city_name']; ?>"');
    }

    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>

これはうまくいくはずです。

于 2013-01-16T01:20:41.757 に答える