在谷歌地图中插入可变GPS坐标

时间:2013-04-17 13:26:18

标签: php google-maps gps

我希望我的脚本从GPS(手机)获取纬度和超长坐标,然后将它们插入谷歌地图并显示手机的位置。好吧,我能够从GPS中检索Lat,Long坐标,但不会将它们作为显示的地图的çentre'插入。我的代码:

<script>
    $(document).ready(function(){
        navigator.geolocation.getCurrentPosition(useposition); 
    });
                function useposition(position){  
            lat = position.coords.latitude;
            lon = position.coords.longitude;   
            $("#location").html('Lat: ' + lat + '<br />Lon: ' + lon);

        }
</script><meta name="viewport" content="initial-scale=1.0, user-scalable=no"<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">
function initialize() {
    var latlng = new google.maps.LatLng(54,-1);
    var settings = {
        zoom: 15,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), settings);
var marker = new google.maps.Marker({      position: latlng,      map: map,      title:"Yeah buddy!"  })};

                </script>

正如您可以看到我获取GP坐标,我想将它们插入到我加载的地图中:<body onload="initialize ()" > </body> 我只是不知道如何从lat,lon和如何在gogle地图中正确插入变量。请帮帮我。

1 个答案:

答案 0 :(得分:0)

我假设'在地图中插入坐标'是指在该位置添加标记?

您遇到的第一个问题是map变量是初始化函数的局部变量。所以你可以把它变成一个全局变量。然后在您的useposition函数中,您只需创建一个新标记。

<script>
    var map;

    $(document).ready(function(){
        navigator.geolocation.getCurrentPosition(useposition); 
    });

    function useposition(position){  
            lat = position.coords.latitude;
            lon = position.coords.longitude;   
            $("#location").html('Lat: ' + lat + '<br />Lon: ' + lon);
            var marker = new google.maps.Marker({      
                position: new google.maps.LatLng(lat,lon),      
                map: map,      
                title:"Your Mobile"  });
        }

function initialize() {
    var latlng = new google.maps.LatLng(54,-1);
    var settings = {
        zoom: 15,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("map"), settings);
    var marker = new google.maps.Marker({      position: latlng,      map: map,      title:"Yeah buddy!"  })
};
</script>