个人中心
gpt4 book ai didi

javascript - Google map API 根据复选框操作 jQuery 重新中心化

转载 作者：行者123 更新时间：2023-11-28 19:05:34 25 4
gpt4 key购买 nike

大家好

我一直在研究 google map html，但在重新加载 map 作为我的复选框的操作时遇到一些困难。我只是想重新定位 map 。任何建议，将不胜感激。谢谢!

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

最佳答案

您可以动态更改 map 的中心而无需重新加载:

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

map.setCenter(newPos);

map.panTo(newPos);

map.panBy(xpixel,ypixel);

map.panToBounds(newBounds);

这些是更改 map 中心的方法( documentation )

关于javascript - Google map API 根据复选框操作 jQuery 重新中心化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31749038/

25 4 0
文章推荐： python - 无法在 Google Cloud 中训练我的 Tensorflow 检测器模型
文章推荐： iphone - 移动网络应用程序 CSS 在方向更改时中断
文章推荐： javascript - 在 jquery 循环中定位寻呼机按钮
文章推荐： javascript - 使用 window.onload() 和正常调用 JS 文件中的函数有什么区别？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com