为什么我的剃刀页面没有显示谷歌地图?

时间:2016-04-14 06:58:32

标签: asp.net-mvc google-maps

我是asp.net mvc的初学者,我读了编写简单地图web应用程序的教程:
this tutorial


所以在我的视图页面中写下这段代码:

@section Scripts {
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script>
}

<h2>Hello, Google Maps</h2>
<div id="map_canvas" style="width:400px; height:300px"></div>
<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(40.716948, -74.003563);
        var options = { zoom: 14, center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP};
        var map = new google.maps.Map(document.getElementById
            ("map_canvas"), options);
    }
    $(function () {
        initialize();
    });

</script>


但当我运行我的项目时,我看不到任何东西或地图,会发生什么?我怎么能解决这个问题?谢谢。
我打开firefox浏览器控制台并收到此消息:

The connection to ws://localhost:48472/fbc4eb4ba8f245c08d4b7830ea1bab80/browserLinkSignalR/connect?transport=webSockets&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAAVMxSNM8YWkSjTNqVKDW%2FRgAAAAACAAAAAAAQZgAAAAEAACAAAABdm%2BiuJnxhF10BzDr1Z%2B7J6KR%2F%2BuJCWYOVuUONt67r8gAAAAAOgAAAAAIAACAAAACcPWAkFxp3Ue2b%2Fu4pg3M7Y3PvHkDLNZfT2ohQfLpWcDAAAAAeHVeKECzTOS87AKunnn2HMxQVjyac86hh6M%2FTjYF4YXxInAmM5wmBizj7UnQW32JAAAAAPgk7BG3rmPAhFQeTmLPjNLjB2Ow%2FbyNdPE5HyR4%2BRmJG3IdLX2om1zux8pxGME9jhfhw3C3AP0e1r5y1JrLtAw%3D%3D&requestUrl=http%3A%2F%2Flocalhost%3A31095%2FGoogleMap%2FGoogleMap&browserName=Firefox&userAgent=Mozilla%2F5.0+(Windows+NT+10.0%3B+WOW64%3B+rv%3A43.0)+Gecko%2F20100101+Firefox%2F43.0&tid=6 was interrupted while the page was loading. browserLink:62:20265
ReferenceError: $ is not defined
 GoogleMap:33:5
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.

2 个答案:

答案 0 :(得分:2)

你不需要jquery运行初始化你只需添加

 google.maps.event.addDomListener(window, 'load', initialize);

。 这样

<script type="text/javascript">
function initialize() {
    var latlng = new google.maps.LatLng(40.716948, -74.003563);
    var options = { zoom: 14, center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map = new google.maps.Map(document.getElementById
        ("map_canvas"), options);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

尝试使用

@section Scripts {
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?"></script>
}

答案 1 :(得分:1)

您需要使用Jquery 或者只是在底部调用方法,这样整个代码应该像

&#13;
&#13;
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<h2>Hello</h2>
<div id="map_canvas" style="width:400px; height:300px"></div>
&#13;
public static string Foo(string test, int id)
{
  return "Admin" + test + id.ToString();
}
&#13;
&#13;
&#13;

初​​始化();

它应该有用。