Question

以下是我的代码，用于呈现Google地图以及一些下拉菜单。我已经遵循了多个教程并复制了相同的内容，但在所有情况下，代码似乎运行正常，没有任何异常/错误，但最后当页面加载时，它只包含下拉列表并且未加载地图。

如果有人可以指出我正确的方向让我知道我做错了什么，那将是非常有帮助的。

@model WebTM.Models.MasterDataModel.MastersModel

@{
    ViewBag.Title = "RetailersOnMap";
    Layout = "~/Views/Shared/_Layout.cshtml";
    WebTM.Models.MasterDataModel.MastersModel ModelObj = new WebTM.Models.MasterDataModel.MastersModel();
    ModelObj.Zone = Model.Zone;
    ModelObj.Region = Model.Region;
    ModelObj.Territory = Model.Territory;
    ModelObj.Taluk = Model.Taluk;
}
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCss7ir2FP4Zves_bA-p1VtCXjzg4zzIyw&sensor=true"></script>
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        Page Header
        <small>Optional description</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
    </ol>
</section>
<script src="~/Scripts/jquery-1.11.3.min.js"></script>
<section class="content">
    <script>
        function MapInitialize() {
            debugger;
            var latitude = '@(System.Configuration.ConfigurationManager.AppSettings["Latitude"].ToString())';
            var longitude = '@(System.Configuration.ConfigurationManager.AppSettings["Longitude"].ToString())';

            var mapProp = {
                center: new google.maps.LatLng(6.9167, 79.8473),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map1 = new google.maps.Map(document.getElementById("divMapView"), mapProp);
            debugger
            var latlng = new google.maps.LatLng(latitude, longitude);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map1,
                title: 'My Place'
            });

        }
        $(document).ready(function () {
            debugger
            MapInitialize();
            debugger
        });
    </script>
    <div class="col-md-3">

        @Html.LabelFor(m => m.Zone)


        @Html.DropDownListFor(m => m.Zone, Model.Zones, "--Select Zone", new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Zone)


        <div>
            @Html.LabelFor(m => m.Region)


            @Html.DropDownListFor(m => m.Region, Model.Regions, "--Select Region", new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Region)

        </div>
        <div>
            @Html.LabelFor(m => m.Territory)


            @Html.DropDownListFor(m => m.Territory, Model.Territories, "--Select Territory", new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Territory)

        </div>
        <div>
            @Html.LabelFor(m => m.Taluk)


            @Html.DropDownListFor(m => m.Taluk, Model.Taluks, "--Select Taluk", new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Taluk)

        </div>
    </div>
    <div id="divMapView" class="col-md-9">

    </div>

</section>

Answer 1

您的代码没有问题，并且您的地图实际上已显示，但div需要根据它绘制高度。

<div id="divMapView" class="col-md-9" style="height: 300px">

Answer 2

您可以更改脚本标记并进行检查。以下代码对我有用。 +你需要设置div的大小。

<script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?callback=myMap&key=AIzaSyCss7ir2FP4Zves_bA-p1VtCXjzg4zzIyw&sensor=true"></script>

GoogleAPI的地图未在MVC应用程序中呈现

2 个答案: