gpt4 book ai didi

javascript - Google map API 未显示在 MVC5 中

转载 作者:行者123 更新时间:2023-11-28 00:27:16 25 4
gpt4 key购买 nike

我关注了this tutorial用于在我的 ASP.NET MVC5 项目中创建 Google map API。

我已将此代码添加到我的 _Layout.cshtml 中(在底部,<html> 部分下方 - 已尝试按照建议的 here 将它们移动到 <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>

将此代码添加到我的 View 中(在我希望 map 显示的位置):

<div id="map_canvas" style="width: 640px; height: 480px;">  
</div>

在我的_Layout的底部<body>部分,我有:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

在我的注册包功能中(我知道它正在工作,因为在其他地方渲染其他包正在工作)我有:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

但它不起作用。我得到的是这样的空白(如果需要,请点击查看更大的版本):

broken-map-smaller

但没有 map 。

我已经查看了页面源代码,两部分代码都出现在其中。我不知道还要看什么或尝试什么,如果我可能遗漏了一些关键步骤,如果我需要为 MVC5 做一些不同的事情(教程是针对 MVC4 的),如果 Google API 再次更改并且您需要再次使用 key 才能使用它,或者如果问题完全是其他问题。

更新:上面的代码可以在 this fiddle 中运行。 (感谢 HoangHieu 让我开始使用 JSFiddle),所以问题肯定是在设置或链接在一起,而不是 JavaScript/JQuery 本身。

最佳答案

原来是这一行

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

我所遵循的教程以及其他几个在线教程中给出的内容是不正确的。也许谷歌地图自编写以来就已经更新了。无论如何,src属性应使用 https URL,而不是 http。

我只是将其更改为

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

一切正常。

Here Google 提供的一些文档可能会对 future 的读者有所帮助:

HTTPS or HTTP

We think security on the web is pretty important, and recommend using HTTPS whenever possible. As part of our efforts to make the web more secure, we've made all of the Google Maps APIs available over HTTPS. Using HTTPS encryption makes your site more secure, and more resistant to snooping or tampering.

<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.

关于javascript - Google map API 未显示在 MVC5 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29373197/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com