Question

大家好，

我一直在研究谷歌地图HTML，但我在重新加载地图作为我的复选框的动作时遇到了一些困难。我只是想重新定位地图。任何建议，将不胜感激。谢谢！

    <!DOCTYPE html>
    <html>
    <head>
    <style type = "text/css">
      html, body{height: 90%;width: 90%;padding: 5px;margin: auto;}
      #googleMap {height: 90%; width: 90%; padding: 5px; margin: auto;}
      #left_check {position: absolute;left: 10%;}
      #padded-left {position: absolute;padding-left: 1.4em;}
      #right_check{float: right; }
      #mid_check {text-align: center;margin-left: auto;margin-right: auto;}
      #left_align {display: inline-block;text-align: left;}
    </style>

    <script type = "text/javascript" 
    	src = "http://maps.googleapis.com/maps/api/js">
    </script>

    <script type = "text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'> </script>
    <script type = "text/javascript">
$(document).ready(function() {

    $('.location').click(function(){
        $(".location").removeProp("checked");
        $(this).prop("checked","checked");
    });
  
    $('#canada1').click(function() {
        if ($('#canada1').is(':checked')) {
            alert('Canada is checked');
            var canadaPos = new google.maps.LatLng(58.1707, -97.6289);

            map.setOptions({
                center: canadaPos,
            });
        };
  });


});

    function initialize() {
        var mapProperties = 
        	{
        	// Center Map on specified Lat/Lng and set default zoom
            center: { lat: 41.5, lng: -88},
            zoom: 4
            };
            //creating the map object
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProperties);
      
      
     
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

    </head>


    <body>
      <div id="googleMap"> </div>

      <ul style = "list-style-type:none">

        <div id = "left_check">
          <li> 
              <form>
                  <input type ="checkbox" name ="location" value ="united_states"> United States (domestic) <br>

                  <div id = "padded-left">
                    <input type ="checkbox" class ="location" value ="west_coast"> West <br>
                    <input type ="checkbox" class ="location" value ="central_us"> East <br>
                    <input type ="checkbox" class ="location" value ="east_coast"> Central
                  </div>
              </form>
          </li>
        </div>

        <div id = "right_check">
          <li>
              <form>
                  <input type ="checkbox" class ="location" value ="europe"> Europe <br>
                  <input type ="checkbox" class ="location" value ="africa"> Africa <br>
                  <input type ="checkbox" class ="location" value ="asia"> Asia <br>
                  <input type ="checkbox" class ="location" value ="australia"> Australia
              </form>
          </li>
        </div>

        <div id = "mid_check">
        <div id = "left_align">
          <li>
              <form>
                  <input id ="canada1" type ="checkbox" class ="location" value ="canada"> Canada <br>
                  <input type ="checkbox" class ="location" value ="central_america"> Central America <br>
                  <input type ="checkbox" class ="location" value ="south_america"> South America <br>
                  <input type ="checkbox" class ="location" value ="south_america"> Oceanic
              </form>
          </li>
        </div>
        </div>

      </ul>


    </body>
    </html>

Answer 1

我认为问题在于您尝试添加＆＃39;加载＆＃39;复选框检查时窗口的事件，但此事件在第一页加载时触发，并且在您单击复选框时不会触发。

我的意思是这一行：

google.maps.event.addDomListener(window, 'load', reinitialize);

您可以尝试在上一行之后强制执行此事件：

$(window).trigger('load');

或者只是执行你的功能：

$('#canada1').click(function() {
        if ($('#canada1').is(':checked')) {
            alert('Canada is checked');
            function reinitialize() {
                var canada1map = 
                {
                center: { lat: 58.1707, lng: -97.6289},
                zoom: 4
                };
                var map = new google.maps.Map(document.getElementById("googleMap"), canada1map);
            };

            reinitialize();
        };

  });

Answer 2

您可以动态更改地图的中心而无需重新加载：

var newPos = new google.maps.LatLng(lat, long);

map.setCenter(newPos);

map.panTo(newPos);

map.panBy(xpixel,ypixel);

map.panToBounds(newBounds);

这些是更改地图中心的方法（documentation）

Answer 3

我想你想要这样的东西......

<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
  html, body{height: 90%;width: 90%;padding: 5px;margin: auto;}
  #googleMap {height: 90%; width: 90%; padding: 5px; margin: auto;}
  #left_check {position: absolute;left: 10%;}
  #padded-left {position: absolute;padding-left: 1.4em;}
  #right_check{float: right; }
  #mid_check {text-align: center;margin-left: auto;margin-right: auto;}
  #left_align {display: inline-block;text-align: left;}
</style>

<script type = "text/javascript" 
	src = "http://maps.googleapis.com/maps/api/js">
</script>

<script type = "text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'> </script>
<script type = "text/javascript">

$(document).ready(function() {
    var data = [{lat: 45, lng: -90},{lat: 30, lng: -100},{lat: 40, lng: -80},{lat: 40, lng: -95}];
    $(".location").click(function(){
         $(".location").removeProp("checked");
         $(this).prop("checked","checked");
         
         map.panTo(data[$(this).attr("data-location")]);
   });
   


});

function initialize() {
    var mapProperties = 
    	{
    	// Center Map on specified Lat/Lng and set default zoom
        center: { lat: 42, lng: -87},
        zoom: 4
        };
        //creating the map object
    map = new google.maps.Map(document.getElementById("googleMap"), mapProperties);
  
  
 
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>


<body>
  <div id="googleMap"> </div>

  <ul style = "list-style-type:none">

    <div id = "left_check">
      <li> 
          <form>
              <input class="location" data-location="0" type ="checkbox" name ="location" > United States (domestic) <br>

              <div id = "padded-left">
                <input class="location" data-location="1" type ="checkbox"  value ="west_coast"> West <br>
                <input class="location" data-location="2" type ="checkbox"  value ="central_us"> East <br>
                <input class="location" data-location="3" type ="checkbox"  value ="east_coast"> Central
              </div>
          </form>
      </li>
    </div>

    <div id = "right_check">
      <li>
          <form>
              <input class="location" data-location="0" type ="checkbox"  value ="europe"> Europe <br>
              <input class="location" data-location="1" type ="checkbox"  value ="africa"> Africa <br>
              <input class="location" data-location="2" type ="checkbox"  value ="asia"> Asia <br>
              <input class="location" data-location="3" type ="checkbox"  value ="australia"> Australia
          </form>
      </li>
    </div>

    <div id = "mid_check">
    <div id = "left_align">
      <li>
          <form>
              <input class="location" data-location="0" id ="canada1" type ="checkbox"  value ="canada"> Canada <br>
              <input class="location" data-location="1" type ="checkbox"  value ="central_america"> Central America <br>
              <input class="location" data-location="2" type ="checkbox"  value ="south_america"> South America <br>
              <input class="location" data-location="3" type ="checkbox"  value ="south_america"> Oceanic
          </form>
      </li>
    </div>
    </div>

  </ul>


</body>
</html>

Google Map API在复选框操作jQuery上重新定位

3 个答案: