Google Maps API未显示在MVC5中
[英]Google Maps API not showing up in MVC5
问题描述
I followed this tutorial for creating a Google maps API in my ASP.NET MVC5 project. 
我按照本教程在ASP.NET MVC5项目中创建Google Maps API。
I have added this code to my _Layout.cshtml (at the bottom, underneath the <html> section - have tried moving them to the <head> section as suggested here but it didn't make any difference): 我已将此代码添加到我的_Layout.cshtml （在底部<html>部分的下方-尝试按照此处的建议将它们移至<head>部分，但没有任何区别）：
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
$(document).ready(function () {
initialize();
});
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(6.9167, 79.8473),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
// create a marker
var latlng = new google.maps.LatLng(6.9167, 79.8473);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'My Place'
});
}
</script>
and this code to my view (in the place I want the map to show): 并将此代码显示到我的视图中（在我希望地图显示的位置）：
<div id="map_canvas" style="width: 640px; height: 480px;">
</div>
At the bottom of my _Layout <body> section, I have: 在_Layout <body>部分的底部，我有：
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
and in my registering bundles function (which I know is working because rendering other bundles elsewhere is working) I have: 在我的注册捆绑软件功能中（我知道它正在工作，因为在其他地方渲染其他捆绑软件正在工作），我有：
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
but it's not working. 但它不起作用。 What I get is a blank space like this (click for bigger version if needed): 我得到的是一个这样的空白（如果需要，请单击以获得更大的版本）：
but no map. 但没有地图。
I have viewed the page source and both sections of code appear in it. 我已经查看了页面源代码，并且代码的两个部分都出现在其中。 I don't know what else to look at or try, if maybe there's some crucial step that I'm missing, if I need to do something different for MVC5 (the tutorial was for MVC4), if the Google API has changed again and you need a key again to be able to use it, or if the problem is something else entirely. 我不知道还有什么要看或尝试的，如果我缺少一些关键的步骤，如果我需要为MVC5做一些不同的事情（本教程是针对MVC4的），并且Google API又一次发生了变化，您需要再次使用一把钥匙才能使用它，或者如果问题完全出在其他地方。
Update: The code above is working in this fiddle (thanks HoangHieu for getting me started with JSFiddle), so the problem is definitely in the setting up or linking together, not with the JavaScript/JQuery itself. 更新：上面的代码正在这个小提琴中工作（感谢HoangHieu让我开始使用JSFiddle），因此，问题肯定出在设置或链接在一起，而不是JavaScript / JQuery本身。
2 个解决方案
解决方案1
1 已采纳 2015-04-02 19:01:24
It turns out that this line 原来这条线
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
as given in the tutorial I was following, and several other online tutorials, is incorrect. 正如我所遵循的教程中给出的那样，以及其他一些在线教程中的内容是错误的。 Perhaps Google Maps has been updated since they were written. 自编写以来，也许Google地图已经更新。 In any case, the src attribute should use a https URL, not http. 无论如何， src属性应使用https URL，而不是http。
I simply changed it to 我只是将其更改为
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false">
and everything worked. 一切正常。
Here is some documentation from Google which may help future readers: 这是Google的一些文档，可能会对将来的读者有所帮助：
HTTPS or HTTP
We think security on the web is pretty important, and recommend using HTTPS whenever possible.
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY" type="text/javascript"></script>If required, you can load the Google Maps JavaScript API over HTTP by requesting http://maps.googleapis.com/ , or http://maps.google.cn for users in China.
解决方案2
0 2015-04-01 10:20:18
DEMO: http://jsfiddle.net/uL2Lshu6/ 演示： http : //jsfiddle.net/uL2Lshu6/
Update DEMO : DEMO: http://jsfiddle.net/uL2Lshu6/2/ 更新DEMO ：DEMO： http : //jsfiddle.net/uL2Lshu6/2/
if You wanna use $(document) , you must include "jQuery" into html code Have you include jQuery
I have change 我有零钱
$(document).ready(function () {
initialize();
});
to 至
window.onload = initialize;
and it worked. 而且有效。 I think it's differences between JavaScript's window.onload and JQuery's $(document).ready() 我认为这是JavaScript的window.onload和JQuery的$（document）.ready（）之间的区别
More: window.onload vs $(document).ready() 更多： window.onload与$ {document）.ready（）
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (eg images) also has been loaded. 就绪事件在HTML文档已加载之后发生，而onload事件在稍后又加载了所有内容（例如图像）时发生。
The onload event is a standard event in the DOM, while the ready event is specific to jQuery. onload事件是DOM中的标准事件，而ready事件特定于jQuery。 The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load. ready事件的目的是，它应该在文档加载后尽早发生，从而使向页面中的元素添加功能的代码不必等待所有内容加载。
His had been change http://maps.google.com/maps/api/js?sensor=false to https://maps.google.com/maps/api/js?sensor=false And it fixed..
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.