javascript - Google Maps API 3 - 限制平移/ map 边界-6ren

javascript - Google Maps API 3 - 限制平移/ map 边界

转载作者：数据小太阳更新时间：2023-10-29 05:41:05

25

4

我完全不熟悉 Google map ，正在创建我的第一张 map ，以便将其整合到我的网站中。

我试图将用户可以移动的区域限制在英国，并查看了这里的几篇帖子，它们都给出了非常相似的答案，但是我无法让代码为我工作. This solution is the closest that I have got但是，每当我尝试完全移动 map 时，它都会以我的一个边界点为中心，而且我无法将其移动到其他任何地方。

我可能犯了一个非常愚蠢的错误，在这种情况下我深表歉意，但我无法弄清楚哪里出了问题。有人有什么想法吗？

谢谢

我的代码如下(取自 Google 的示例代码，然后添加到)- 与边界相关的部分靠近底部，从为英国设置边界开始:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Google Maps</title>
    <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://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false">
    </script>

    <?
    //code to get long and lat from http://www.webmonkey.com/2010/02/get_started_with_google_geocoding_via_http
    $apikey = MYKEY;
    $geourl = "http://maps.google.com/maps/geo?q=LS255AA&output=csv&key=$apikey";

    // Create cUrl object to grab XML content using $geourl
    $c = curl_init();
    curl_setopt($c, CURLOPT_URL, $geourl);
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    $csvContent = trim(curl_exec($c));
    curl_close($c);

    // Split pieces of data by the comma that separates them
    list($httpcode, $elev, $lat, $long) = split(",", $csvContent);
    ?>

    <script type="text/javascript">
    var lat = "<?= $lat ?>";
    var long = "<?= $long ?>";
    </script>

    <script type="text/javascript">
        function initialize() {
            //sets the long and lat of map
            var myLatlng = new google.maps.LatLng(lat, long);

            //options for the map
            var myOptions = {
                center: myLatlng,
                zoom: 9,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            //creates the map
            var mymap = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);

            //sets min and max zoom values
            var opt = { minZoom: 7, maxZoom: 11 };
                mymap.setOptions(opt);

            //creates marker
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: mymap,
                title:"Hello World!"
            });

            //content of infowindow
            var contentString = '<h2>I am an info window</h2>'+'<p>Hello my name is infowindow, I need more text to test how big I get</p>';

            //creates infowindow
            var infowindow = new google.maps.InfoWindow({
                    content: contentString,
            });

            //infowindow options
            infowindow.setOptions({maxWidth:200}); 

            //listens for click and opens infowindow
            google.maps.event.addListener(marker, 'click', function() {
                 infowindow.open(mymap,marker);
            });
            // Bounds for UK
            var strictBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(60.88770, -0.83496), 
                    new google.maps.LatLng(49.90878, -7.69042)
            );

            // Listen for the dragend event
            google.maps.event.addListener(mymap, 'dragend', function() {
                if (strictBounds.contains(mymap.getCenter())) return;

                // We're out of bounds - Move the map back within the bounds
                var c = mymap.getCenter(),
                x = c.lng(),
                y = c.lat(),
                maxX = strictBounds.getNorthEast().lng(),
                maxY = strictBounds.getNorthEast().lat(),
                minX = strictBounds.getSouthWest().lng(),
                minY = strictBounds.getSouthWest().lat();

                if (x < minX) x = minX;
                if (x > maxX) x = maxX;
                if (y < minY) y = minY;
                if (y > maxY) y = maxY;

                mymap.setCenter(new google.maps.LatLng(y, x));
            });
        }
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width:50%; height:50%"></div>

</body>
</html>

最佳答案

对于像我一样偶然发现此页面上现已过时的信息的任何人， map API 现在提供了一种内置方法来通过 restriction 属性限制 map 视口(viewport)边界MapOptions 接口(interface)，参见文档 here .此示例限制南北平移显示南极洲:

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 20, lng: -52},
      zoom: 3,        
      restriction: {latLngBounds:{north: 83.8, south: -57, west: -180, east: 180}}
    }); 
}

关于javascript - Google Maps API 3 - 限制平移/ map 边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9099345/

25

4

0

文章推荐： Javascript:奇怪的比较行为

文章推荐： ios - 如何将字符串解析为 NSTimeInterval

文章推荐： ios - Swift 如何根据字体计算一行文本的高度

文章推荐： javascript - 使用内联 JavaScript 加密 mailto 电子邮件地址

zooming - Highcharts 平移
我正在尝试基于此示例实现 highcharts 平移: http://jsfiddle.net/HXUmK/5/ 但我希望能够用鼠标左键缩放并用鼠标右键平移。所以我修改了上面的代码并设法让它工作了一点
java - 平移 BufferedImage
如何删除 BufferedImage 最左边垂直列的 50px，并将其复制到与原始 BufferedImage 大小相同的新 BufferedImage 中？ class TestCopyImage
旋转前后的 OpenGL 平移
以下是关于如何绘制机器人的 ARM 和肩膀并通过一些用户输入旋转它们的代码(取自 http://www.glprogramming.com/red/chapter03.html ): glPushMa
ios - 平移 - 平移之前图像的初始位置
我正在使用 Swift/SpriteKit 并在 SKScene 上创建了 map 的宽图像。我正在用代码完成这一切，并希望让用户拖动手指来平移这张超宽的 map 。可以将其想象为幻想世界的老式 RP
c++ - 如何使用棋盘找到两个摄像机之间的旋转/平移
我正在将 opencv 与 C 一起使用，我正在尝试获取 2 个摄像头之间的外部参数(旋转和平移)。有人告诉我可以使用棋盘格图案进行校准，但我找不到任何好的样本。我该怎么做？编辑给出的建议是用棋
android - 画廊内的图像缩放/平移
我正在尝试在 android 图库小部件中缩放/平移图像。图像覆盖整个屏幕。虽然我可以缩放/平移图库中的图像，但我无法滑动到下一张/上一张图像。单个图像的缩放和平移效果很好。我从 Hello And
JavaFX:如何仅在中间按钮上制作 ScrollPane 平移？
当允许平移时，所有鼠标事件上的 JavaFX ScrollPane Pane : scrollPane.setPannable(true); 如何限制 ScrollPane 仅在鼠标中间事件上平移，
paperjs - 如何使用 paperjs 平移
我一直试图弄清楚如何在 paperjs 中使用 onMouseDrag 和 onMouseDown 进行平移/缩放。我看到的唯一引用是在 coffescript 中，并且不使用 paperjs 工具
d3.js - 平移/缩放顺序比例？
我正在使用 d3 来渲染简化的甘特图，并使用 d3.behavior.zoom 进行平移和缩放。 x 比例是一个时间比例(稍微修改为以列为中心的日历天等)并且工作得很好，但是我在决定如何缩放/平移 y
safari - CSS旋转，平移，缩放动画错误
我已经使用关键帧为HTML/CSS3创建了动画。动画是一个图标，该图标应该围绕其中心点旋转和缩放。该动画可在Chrome中运行，但在Safari中，直到动画结束，它才能正确转换。这是-定位到 s
javascript - 如何在某些事件后加载 Angular 平移
我有一个在登录事件后调用的 TranslationService，在这个服务中我想初始化 $translateProvider.translation 但这个对象似乎无法在 app.config(..
user-interface - 平移，精确定义
滚动和平移有什么区别？平移是否被识别为拖动图像/背景的 Action ，而滚动仅在您使用滚动条时？而且，拖动和平移有什么区别？当我拖动google maps的 map 时，哪个术语合适，拖动还是
Javascript Canvas 平移 Canvas
当用户按下鼠标并移动它时，我试图平移 Canvas ，但由于某种我看不到的原因，它似乎不起作用。有什么想法吗？ canvas.addEventListener('mousedown', onM
audio - Pyglet:控制音频平衡(平移)
我正在拼命寻找一种用 Pyglet 控制声音(左右)平衡的方法。我知道 3D 定位系统，但我真正想要的只是控制平移(类似于 -1:left 1:right)，而 3D 系统在这种情况下会适得其反(
python - 当这些点集包含噪声时如何对齐两组点(平移+旋转)？
考虑以下两组点。我想找到最佳的 2D 平移和旋转，以对齐数据集蓝色和数据集橙色之间的最大数量的点，如果到另一个数据集中最近邻居的距离小于阈值，则认为该点对齐。我知道这与“迭代最近点”算法有关，但在这
d3.js - 凸包不适用于缩放/平移
我正在尝试包含 @bumbeishvili 的 Convex Hull 实现( https://bl.ocks.org/bumbeishvili/f027f1b6664d048e894d19e54fe
svg - D3 平移+缩放约束
我正在尝试在平移和缩放时使可缩放/拖动矩形不超出 svg 边界。我尝试基于此 example 来实现它，但我似乎无法让它工作。我创建了 this jsfiddle只有可缩放和可拖动的矩形。再一次，我试
ios - 约束 UIScrollView 平移？
UIScrollView 有一个内置的行为“directionLockEnabled”。启用后，平移将尝试锁定到水平或垂直方向。但是当用户积极尝试对角滚动时 - 它仍然允许对角滚动。我想删除对角滚
java - 平移/旋转/移动图形对象而不弄乱整个屏幕
我正在编写一个 GUI，它将执行一些图形平移/旋转等操作。我的问题是，当我尝试翻译我的图形时， (a) 整个屏幕都会平移，而不是我的一小块绘制区域 (b) 旧油漆留在那里，留下一个大油漆 Blob
java - LibGDX - Scene2D 平移
我最近一直在做一个项目，作为我的作业。好吧，言归正传，我有一个 Scene2D 的 Screen 实现，我遇到的问题是我在小部件上的触摸事件不会在小部件上停止。我的意思是，如果我弹出一个窗口，并尝

首页

博学

6Ren·AI

商城

javascript - Google Maps API 3 - 限制平移/ map 边界