在当前位置的特定半径的地图上加载自己的标记

时间:2013-11-20 08:55:26

标签: javascript google-maps geolocation geocoding

首先:我是Javascript的新手。我使用Geolocation来获取用户位置和Geocoding

我想知道是否可以在地图上设置自己的标记,并将它们以特定的半径加载到当前位置。因此,如果我获得了用户位置,则应该显示半径范围内的标记,例如1&000; 000m。 在这里,您可以看到我如何使用GeolocationGeocoding

<div id="pos" style="width:585px; height:300px;">
Get position...
</div>
<br />
<p>Put your correct address in the input field below:<br />
</p>
<input type="text" id="address" name="address" placeholder="Type in your address" style="width:250px;" />
<input type="submit" id="submit" onclick="getValue()" value="Submit" />

<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var geocoder;
var map;

function initialize(coords) {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
    var myOptions = {
        zoom: 11,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("pos"), myOptions);

    var marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        title: "Your location:"
    }); 
}

navigator.geolocation.getCurrentPosition(function(position){ 
    initialize(position.coords);
}, function(){
    document.getElementById('pos').innerHTML = 'An error occured. Refresh the page or contact the IT team!';
});

function getValue(){
    var address = document.getElementById("address").value;
    geocoder.geocode(
        {'address': address},
        function(results, status){
            if(status == google.maps.GeocoderStatus.OK)
            {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker(
                {
                    map: map,
                    position: results[0].geometry.location
                });
            }

            else
            {
                alert("An unknown error occured. Refresh the page or contact the IT team!" + status);
            }
    });
}



</script>

这很好用。我想也许我可以在一个数组中设置位置,所以每次加载页面或函数时,它都会从数组中加载位置,并以标记的形式显示每个位置超过1&m; 000m。

有办法做到这一点吗?有人可以给我一个提示吗?

谢谢

0 个答案:

没有答案