谷歌地图不会显示在我的div id="map"

我正在遵循一个教程，该教程可以找到朋友(他们的手机(并在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>

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

希望这会有所帮助!!

相关内容

最新更新

热门标签：