0

我正在关注一个可以找到朋友（他们的手机）并在谷歌地图上精确定位他们的教程。一切都很顺利，包括获取我的坐标并将它们打印到屏幕上并将它们放入我的内部，<div id="location"></div>但现在我正在尝试获取这些坐标并将它们标记在地图上，但我无法显示地图。我确定我的功能以某种方式设置错误，但我无法解决。有什么线索吗？

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>   
    <script src="scripts/jquery.ui.map.js"></script>

    <script>
        $(document).ready(function(){
            navigator.geolocation.getCurrentPosition(useposition); 
        });
    </script>

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

        function deviceposition(position){  
                $("#map").gmap({'center': deviceposition, 'zoom': 12, 'disableDefaultUI': true,          'mapTypeId': 'terrain'}).bind('init', function(ev, map) { themap = map;});

                $('#map').gmap('addMarker', { 'id': 'client', 'position': deviceposition, 'bounds': true 
                });     
              }             
    </script>
</head>
<body>
    <div id="location"></div>   

    <div id="map" style="width:400px; height:400px"></div>        

<!-- This is supposed to be filled with the Google Map coords -->

</body>
</html>
4

1 回答 1

0

我尝试在 CreateElement() 方法中传递 div，然后将值分配给变量 mapcanvas。整个声明位于在此特定行中调用的方法中：

 navigator.geolocation.getCurrentPosition(success);

我正在分享整个代码..

 <script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '600px';

document.querySelector('article').appendChild(mapcanvas);

var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
    style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

var marker = new google.maps.Marker({
  position: coords,
  map: map,
  title:"You are here!"
});
}

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}

</script>

希望这会有所帮助！！！

于 2014-12-18T19:11:08.247 回答