0

下面的代码将显示用户从网站上一页选择的城市、州。但是，地图首先加载 LatLong 位置，然后打开城市、州。如何消除 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 回答