当前位置：文江博客话题详情

Location dictionary geolocation

jQuery/Google 地图：具有半径控制的位置选择器？

发布于 2024-10-14 22:23:44 字数 175 浏览 3 评论 0原文

我正在寻找一种简单的用户友好方式，通过获取纬度/经度位置以及影响半径来选择位置。

我在谷歌广告中选择广告显示区域时看到了类似的事情。我想知道 jQuery/Google 是否有解决方案？或者你见过我可以实现的类似的东西吗？

我只需要一个中心（纬度/经度）和半径。

PS 这是针对英国的。

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

灵芸 2024-10-21 22:23:44

我决定这样的事情：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <!-- TITLE -->
        <title>Website Title</title>

        <!-- META -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <!-- JAVASCRIPT -->
        <script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script>
        <script type="text/javascript" src="jquery-1.4.4.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                var Circle = null;
                var Radius = $("#radius").val();

                var StartPosition = new google.maps.LatLng(54.19335, -3.92695);

                function DrawCircle(Map, Center, Radius) {

                    if (Circle != null) {
                        Circle.setMap(null);
                    }

                    if(Radius > 0) {
                        Radius *= 1609.344;
                        Circle = new google.maps.Circle({
                            center: Center,
                            radius: Radius,
                            strokeColor: "#0000FF",
                            strokeOpacity: 0.35,
                            strokeWeight: 2,
                            fillColor: "#0000FF",
                            fillOpacity: 0.20,
                            map: Map
                        });
                    }
                }

                function SetPosition(Location, Viewport) {
                    Marker.setPosition(Location);
                    if(Viewport){
                        Map.fitBounds(Viewport);
                        Map.setZoom(map.getZoom() + 2);
                    }
                    else {
                        Map.panTo(Location);
                    }
                    Radius = $("#radius").val();
                    DrawCircle(Map, Location, Radius);
                    $("#latitude").val(Location.lat().toFixed(5));
                    $("#longitude").val(Location.lng().toFixed(5));
                }

                var MapOptions = {
                    zoom: 5,
                    center: StartPosition,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: false,
                    disableDoubleClickZoom: true,
                    streetViewControl: false
                };

                var MapView = $("#map");
                var Map = new google.maps.Map(MapView.get(0), MapOptions);

                var Marker = new google.maps.Marker({
                    position: StartPosition, 
                    map: Map, 
                    title: "Drag Me",
                    draggable: true
                });

                google.maps.event.addListener(Marker, "dragend", function(event) {
                    SetPosition(Marker.position);
                });

                $("#radius").keyup(function(){
                    google.maps.event.trigger(Marker, "dragend");
                });

                DrawCircle(Map, StartPosition, Radius);
                SetPosition(Marker.position);

            });

        </script>

    </head>

    <body>

        <form>

            Latitude: <input type="text" id="latitude" /> Longitude: <input type="text" id="longitude" />
            Radius: <input type="text" id="radius" value="320" />

            <div id="map" style="width:600px; height:400px; background-color:#000000;">


            </div>

        </form>

    </body>

</html>

I settled on something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <!-- TITLE -->
        <title>Website Title</title>

        <!-- META -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <!-- JAVASCRIPT -->
        <script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script>
        <script type="text/javascript" src="jquery-1.4.4.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                var Circle = null;
                var Radius = $("#radius").val();

                var StartPosition = new google.maps.LatLng(54.19335, -3.92695);

                function DrawCircle(Map, Center, Radius) {

                    if (Circle != null) {
                        Circle.setMap(null);
                    }

                    if(Radius > 0) {
                        Radius *= 1609.344;
                        Circle = new google.maps.Circle({
                            center: Center,
                            radius: Radius,
                            strokeColor: "#0000FF",
                            strokeOpacity: 0.35,
                            strokeWeight: 2,
                            fillColor: "#0000FF",
                            fillOpacity: 0.20,
                            map: Map
                        });
                    }
                }

                function SetPosition(Location, Viewport) {
                    Marker.setPosition(Location);
                    if(Viewport){
                        Map.fitBounds(Viewport);
                        Map.setZoom(map.getZoom() + 2);
                    }
                    else {
                        Map.panTo(Location);
                    }
                    Radius = $("#radius").val();
                    DrawCircle(Map, Location, Radius);
                    $("#latitude").val(Location.lat().toFixed(5));
                    $("#longitude").val(Location.lng().toFixed(5));
                }

                var MapOptions = {
                    zoom: 5,
                    center: StartPosition,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: false,
                    disableDoubleClickZoom: true,
                    streetViewControl: false
                };

                var MapView = $("#map");
                var Map = new google.maps.Map(MapView.get(0), MapOptions);

                var Marker = new google.maps.Marker({
                    position: StartPosition, 
                    map: Map, 
                    title: "Drag Me",
                    draggable: true
                });

                google.maps.event.addListener(Marker, "dragend", function(event) {
                    SetPosition(Marker.position);
                });

                $("#radius").keyup(function(){
                    google.maps.event.trigger(Marker, "dragend");
                });

                DrawCircle(Map, StartPosition, Radius);
                SetPosition(Marker.position);

            });

        </script>

    </head>

    <body>

        <form>

            Latitude: <input type="text" id="latitude" /> Longitude: <input type="text" id="longitude" />
            Radius: <input type="text" id="radius" value="320" />

            <div id="map" style="width:600px; height:400px; background-color:#000000;">


            </div>

        </form>

    </body>

</html>

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

848 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

马化腾

文章 0 评论 0

thousandcents

文章 0 评论 0

辰『辰』

文章 0 评论 0

ailin001

文章 0 评论 0

再摆5分钟就干活

文章 0 评论 0

冷情妓

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文