2013-02-11 67 views
0

我尝试显示使用HTML5地理位置谷歌地图,代码工作正常是的jsfiddle但在我的MVC应用程序,该地图是不是被displayed..posting下面的代码.. 这是链接 http://jsfiddle.net/PhzsR/62/在mvc3中显示带有html5地理位置的谷歌地图?

@{ 
ViewBag.Title = "Home Page"; 
} 

<h2>@ViewBag.Message</h2> 


<div id="results"></div> 

<div id="map"></div> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var $message_area = jQuery('#results'); 
jQuery(document).ready(function() { 
$message_area.html('<i>Locating you...</i> '); 
if (navigator.geolocation) { 

    navigator.geolocation.getCurrentPosition(


    function foundLocation(position) { 
     $message_area.children().remove(); 

     var latitude = position.coords.latitude; 
     var longitude = position.coords.longitude; 
     var accuracy = position.coords.accuracy; 

     var map; 


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

     var options = { 
      zoom: 12, 
      center: centerPosition, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map($('#map')[0], options); 

     var marker = new google.maps.Marker({ 
      position: centerPosition, 
      map: map, 
      icon: 'http://google-maps-icons.googlecode.com/files/sailboat-tourism.png' 
     }); 

     var circle = new google.maps.Circle({ 
      center: centerPosition, 
      radius: accuracy, 
      map: map, 
      fillColor: '#0000FF', 
      fillOpacity: 0.5, 
      strokeColor: '#0000FF', 
      strokeOpacity: 1.0 
     }); 




     map.fitBounds(circle.getBounds()); 






     $message_area.append('Your latitude: ' + latitude + ' and longitude: ' + longitude + ' and accuracy: ' + accuracy + ':') 
    }, function (error) { 
     switch (error.code) { 
      case error.TIMEOUT: 
       $message_area.append('Timeout error while finding your location'); 
       break; 
      case error.POSITION_UNAVAILABLE: 
       $message_area.append('Position unavailable error while finding your location'); 
       break; 
      case error.PERMISSION_DENIED: 
       $message_area.append('Permission denied error while finding your location'); 
       break; 
      case error.UNKNOWN_ERROR: 
       $message_area.append('Unknown error while finding your location'); 
       break; 
     } 
    }); 






} 
}); 

</script> 

我需要添加任何参考显示谷歌地图?

回答

0

如果你看一下“管理资源”你的小提琴标签,你必须谷歌地图API这是不是在你的代码上面的引用,请确保您添加

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
+0

与实现,即使现在地图不显示,但积极的是,添加脚本后,经纬度值显示...请检查我编辑的代码在我的问题 – 2013-02-11 11:58:37

+0

默认情况下地图div不会有一个高度,所以它会崩溃,但可能都会工作。尝试为'#map' div添加明确的高度,例如'

' – 2013-02-11 12:12:59

+0

thnku,现在工作正常 – 2013-02-11 12:25:02