尝试使用用户设置的半径获取谷歌地图 [英] Trying to get google map with user set radius

问题描述

我打算允许用户从谷歌地图的用户中心位置设置半径。我有大部分的螺母和螺栓，但不能通过线路。这是我正在使用的代码。任何帮助非常感谢。

css和html代码

 搜索半径：
< input type =rangename =search_radiusid =search_radiusmin =10max =100> 
< script> 
 //在地图上添加一个圆形覆盖图。 
 circle = new google.maps.Circle（{
 map：map，
 radius：10 
}）; 
 
 //由于Circle和Marker都扩展MVCObject，因此可以使用MVCObject的bindTo（）方法将它们绑定到
 //。在这里，我们将
 // Circle的中心绑定到Marker的位置。 
 // http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject 
 circle.bindTo（'center'，marker，'position'）; 
 
 
 $ b $（＃search_radius）。slider（{
 orientation：vertical，
 range：min，
 max：3000，
 min：100，
 value：500，
 slide：function（event，ui）{
 updateRadius（circle，ui.value）; 
} 
}）; 
 
 function updateRadius（circle，rad）{
 circle.setRadius（rad）; 
} 
 
 //注册一个事件监听器，当页面完成加载时触发。 
 google.maps.event.addDomListener（window，'load'，init）; 
 
< / script 
 
 
 
< center> 
< script> getLocation（）;< / script> 
< button> onclick =getLocation（）>获取我的位置< / p>< p id =map>< / p> 
 
搜索半径：
< input type =rangename =search_radiusid =search_radiusmin =10max =100> 
< script> 
 //在地图上添加一个圆形覆盖图。 
 circle = new google.maps.Circle（{
 map：map，
 radius：10 
}）; 
 
 //由于Circle和Marker都扩展MVCObject，因此可以使用MVCObject的bindTo（）方法将它们绑定到
 //。在这里，我们将
 // Circle的中心绑定到Marker的位置。 
 // http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject 
 circle.bindTo（'center'，marker，'position'）; 
 
 
 $ b $（＃search_radius）。slider（{
 orientation：vertical，
 range：min，
 max：3000，
 min：100，
 value：500，
 slide：function（event，ui）{
 updateRadius（circle，ui.value）; 
} 
}）; 
 
 function updateRadius（circle，rad）{
 circle.setRadius（rad）; 
} 
 
 //注册一个事件监听器，当页面完成加载时触发。 
 google.maps.event.addDomListener（window，'load'，init）; 
 
< / script 
 
<！ -  Check Geolocation Support  - > 
< script> 
 var x = document.getElementById（map）; 
 
函数getLocation（）{
 if（navigator.geolocation）{
 navigator.geolocation.getCurrentPosition（showPosition）; 
} else {
 x.innerHTML =此浏览器不支持地理定位。; 
} 
} 
 
 function showPosition（position）{
 x.innerHTML =Latitude：+ position.coords.latitude + 
<经度：+ position.coords.longitude; 
 var mapDiv = document.getElementById（'map'）; 
 var map = new google.maps.Map（mapDiv，{
 center：{lat：position.coords.latitude，lng：position.coords.longitude}，
 zoom：12 
}）; 
 
 
函数initMap（）{
 var mapDiv = document.getElementById（'map'）; 
 var map = new google.maps.Map（mapDiv，{
 center：{lat：53.3498，lng：-6.2603}，
 zoom：6 
}）; 
 
} 
 
< / script> 
< script src =https://maps.googleapis.com/maps/api/js?callback=initMapasync defer>< / script> 
  

解决方案

在圆的半径为改变。

  function updateRadius（circle，rad）{
 circle.setRadius（rad ）; 
 map.fitBounds（circle.getBounds（））; 
} 
  

map.fitBounds的文档是 here 。

你也许应该只有一张地图在所有函数都可以访问的范围内对象，并在其上设置中心和缩放选项，而不是为不同的选项创建新的地图对象。我也没有在当前的代码中看到地图对象可以通过添加圆的第一个脚本代码访问。

  var x = document.getElementById（map）; 
 var map = new google.maps.Map（mapDiv，{
 center：{lat：53.3498，lng：-6.2603}，
 zoom：6 
}）; 
 
函数showPosition（position）{
 x.innerHTML =Latitude：+ position.coords.latitude + 
< br>经度：+ position.coords。经度; 
 
 map.center = {lat：position.coords.latitude，lng：position.coords.longitude}; 
 map.zoom = 12; 
}）; 
} 
  

I am tring to allow the user to set the radius from the users center location of a google map. I have most of the nuts and bolts but can't get it over the line. Here is the code I'm using. Any help is much appreciated.

css AND html code

Search Radius:
    <input type="range" name="search_radius" id="search_radius" min="10" max="100">
    <script>
        // Add a Circle overlay to the map.
        circle = new google.maps.Circle({
            map: map,
            radius: 10
        });

        // Since Circle and Marker both extend MVCObject, you can bind them
        // together using MVCObject's bindTo() method.  Here, we're binding
        // the Circle's center to the Marker's position.
        // http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
        circle.bindTo('center', marker, 'position');
        }


        $("#search_radius").slider({
            orientation: "vertical",
            range: "min",
            max: 3000,
             min: 100,
            value: 500,
            slide: function(event, ui) {
                updateRadius(circle, ui.value);
            }
        });

        function updateRadius(circle, rad) {
            circle.setRadius(rad);
        }

        // Register an event listener to fire when the page finishes loading.
        google.maps.event.addDomListener(window, 'load', init);

    </script



<center>
    <script>getLocation();</script>
    <button onclick="getLocation()">Get My Location</button><p id="map"></p>

    Search Radius:
    <input type="range" name="search_radius" id="search_radius" min="10" max="100">
    <script>
        // Add a Circle overlay to the map.
        circle = new google.maps.Circle({
            map: map,
            radius: 10
        });

        // Since Circle and Marker both extend MVCObject, you can bind them
        // together using MVCObject's bindTo() method.  Here, we're binding
        // the Circle's center to the Marker's position.
        // http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
        circle.bindTo('center', marker, 'position');
        }


        $("#search_radius").slider({
            orientation: "vertical",
            range: "min",
            max: 3000,
             min: 100,
            value: 500,
            slide: function(event, ui) {
                updateRadius(circle, ui.value);
            }
        });

        function updateRadius(circle, rad) {
            circle.setRadius(rad);
        }

        // Register an event listener to fire when the page finishes loading.
        google.maps.event.addDomListener(window, 'load', init);

    </script

<!--Check Geolocation Support -->
<script>
var x = document.getElementById("map");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
     var mapDiv = document.getElementById('map');
    var map = new google.maps.Map(mapDiv, {
      center: {lat: position.coords.latitude, lng: position.coords.longitude},
      zoom: 12
    });
}

function initMap() {
     var mapDiv = document.getElementById('map');
    var map = new google.maps.Map(mapDiv, {
      center: {lat: 53.3498, lng: -6.2603},
      zoom: 6
    });

  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

解决方案

You are not updating the map after the circle's radius is changed. I haven't tested the code below.

function updateRadius(circle, rad) {
  circle.setRadius(rad);
  map.fitBounds(circle.getBounds());
}

Documentation on map.fitBounds is here.

You should also probably just have one map object that in a scope that is accessible by all your functions and just set the center and zoom options on it instead of creating a new map object for the different options. I also don't see in the current code how the map object is accessible to the first script code that adds the circle.

var x = document.getElementById("map");
var map = new google.maps.Map(mapDiv, {
  center: {lat: 53.3498, lng: -6.2603},
  zoom: 6
});

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;

    map.center = {lat: position.coords.latitude, lng:     position.coords.longitude};
    map.zoom = 12;
  });
}

这篇关于尝试使用用户设置的半径获取谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！