Question

我正在按照可以找到朋友（他们的手机）并在Google地图上查明它们的教程。一切进展顺利，包括获取我的坐标并将它们打印到屏幕并将它们放入我的<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>

Answer 1

我尝试在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>

希望这会有所帮助!!!

Google地图不会显示在我的div id =＆＃34; map＆＃34;

1 个答案: