Question

我正在编写代码，以便使用Google Maps V3 APi（JS）在地图上显示一些图钉。

我想使用Autozoom和Autocenter。为此，我需要使用Bound.extends（）和map.fitBounds（），然而，使用这个函数我只有一个图钉......而不是另一个......这很奇怪......

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAs4c8xnkxcZNRK6yQt-Y21N1L3mT1AFfE&callback=initMap">
</script>
</head>
<body>

<div id="map" style="width: 1024px; height: 768px"></div>

<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
  However, it seems JavaScript is either disabled or not supported by your browser. 
  To view Google Maps, enable JavaScript by changing your browser options, and then 
  try again.
</noscript>


<script type="text/javascript">
//<![CDATA[

     // A function to create the marker and set up the event window
function createMarker(point,name)
{
    var marker = new google.maps.Marker({position: point, title: name});
    google.maps.event.addListener(marker, "click", function(){
        marker.openInfoWindowHtml(name);});

    return marker;
}

function initMap() 
{

    var map = new google.maps.Map(document.getElementById('map'));//, { center: {lat: -34.397, lng: 150.644},zoom: 8});
    var geocoder = new google.maps.Geocoder();
    var optionsCarte =  {
        zoom: 8,
        center: new google.maps.LatLng(48.5, 2.9),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    var map = new google.maps.Map(document.getElementById('map'), optionsCarte);

    var bounds = new google.maps.LatLngBounds();

    // ========== Read paramaters that have been passed in ==========

    // If there are any parameters at the end of the URL, they will be in  location.search
    // looking something like  "?q=My+First+Point@59.591,17.82"

    // skip the first character, we are not interested in the "?"
    var query = location.search.substring(1);

    // split the rest at each "&" character to give a list of  "argname=value"  pairs
    var pairs = query.split("&");

    for (var i=0; i<pairs.length; i++) 
    {
        // break each pair at the first "=" to obtain the argname and value
        var pos = pairs[i].indexOf("=");
        var argname = pairs[i].substring(0,pos).toLowerCase();
        var value = pairs[i].substring(pos+1);

        // process each possible argname  -  use unescape() if theres any chance of spaces
        if (argname == "q") 
        {
            var text = unescape(value);
            var parts = text.split("@");

            geocoder.geocode( { 'address': parts[1]}, function(results, status) 
            {
                if (status == google.maps.GeocoderStatus.OK) 
                {
                    map.setCenter(results[0].geometry.location);//center the map over the result

                    var title = parts[0];

                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });

            bounds.extend(results[0].geometry.location);
        }
    }

    map.fitBounds(bounds)
    map.panToBounds(bounds); 
    map.setCenter(bounds.getCenter());

}   

</script>

为了执行我的通话，我必须这样做：

http://XX.XX.XX.XX/MutliMaps.html?q=MyPushPin1@myAdresse1&q=MyPushPin2@myAdresse2

知道我的错误在哪里？我认为这是bound.extend功能。

Answer 1

您必须移动与循环中的绑定，缩放和居中相关的代码

因此，首先您可以获得地理编码结果（因此您不会收到此错误），然后您可以逐步扩展边界。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAs4c8xnkxcZNRK6yQt-Y21N1L3mT1AFfE&callback=initMap">
</script>
</head>
<body>

<div id="map" style="width: 1024px; height: 768px"></div>

<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
  However, it seems JavaScript is either disabled or not supported by your browser. 
  To view Google Maps, enable JavaScript by changing your browser options, and then 
  try again.
</noscript>


<script type="text/javascript">
//<![CDATA[

     // A function to create the marker and set up the event window
function createMarker(point,name)
{
    var marker = new google.maps.Marker({position: point, title: name});
    google.maps.event.addListener(marker, "click", function(){
        marker.openInfoWindowHtml(name);});

    return marker;
}

function initMap() 
{

    var map = new google.maps.Map(document.getElementById('map'));//, { center: {lat: -34.397, lng: 150.644},zoom: 8});
    var geocoder = new google.maps.Geocoder();
    var optionsCarte =  {
                            zoom: 8,
                            center: new google.maps.LatLng(48.5, 2.9),
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };


    var map = new google.maps.Map(document.getElementById('map'), optionsCarte);

    var bounds = new google.maps.LatLngBounds();

    // ========== Read paramaters that have been passed in ==========

    // If there are any parameters at the end of the URL, they will be in  location.search
    // looking something like  "?q=My+First+Point@59.591,17.82"

    // skip the first character, we are not interested in the "?"
    var query = location.search.substring(1);

    // split the rest at each "&" character to give a list of  "argname=value"  pairs
    var pairs = query.split("&");

    for (var i=0; i<pairs.length; i++) 
    {
        // break each pair at the first "=" to obtain the argname and value
        var pos = pairs[i].indexOf("=");
        var argname = pairs[i].substring(0,pos).toLowerCase();
        var value = pairs[i].substring(pos+1);

        // process each possible argname  -  use unescape() if theres any chance of spaces
        if (argname == "q") 
        {
            var text = unescape(value);
            var parts = text.split("@");

            geocoder.geocode( { 'address': parts[1]}, function(results, status) 
            {
              if (status == google.maps.GeocoderStatus.OK) 
              {
                map.setCenter(results[0].geometry.location);//center the map over the result

                              var title = parts[0];


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

                bounds.extend(results[0].geometry.location);
                map.fitBounds(bounds)
                map.panToBounds(bounds); 
                map.setCenter(bounds.getCenter());               
              } else {
                alert('Geocode was not successful for the following reason: ' + status);
              }

            });

            //bounds.extend(results[0].geometry.location);
        }
    }

    //map.fitBounds(bounds)
    ///map.panToBounds(bounds); 
    //map.setCenter(bounds.getCenter());

}   

</script>

使用GoogleMaps Avi v3 JS自动缩放/自动中心

1 个答案: