个人中心
gpt4 book ai didi

map - jQuery/谷歌地图 : Location picker with radius control?

转载 作者：行者123 更新时间：2023-12-04 14:10:44 25 4
gpt4 key购买 nike

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

我在谷歌广告中选择广告展示区域时看到了类似的事情。我想知道是否有 jQuery/Google 解决方案？还是您看到了我可以实现的类似内容？

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

附言这是针对英国的。

最佳答案

我选择了这样的东西:

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

关于map - jQuery/谷歌地图 : Location picker with radius control?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4855877/

25 4 0
文章推荐： sparql - 查找包含集合中所有值的列表？
文章推荐： scala - 带有无形的类型转换
文章推荐： scala - 折叠具有未知类型的 HList
文章推荐： gradle - 使用 Gradle 将模块化库发布到 Maven
行者123
个人简介

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

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