Question

我需要一些帮助才能将Google地图应用到应用程序中。我已经使用Localhost对此进行了测试，并立即返回地图。我遇到的问题是当我将它部署到天蓝色平台时，地图需要一个年龄才能返回。有时您需要多次刷新页面才能加载页面。

我已经生成了一个Google Web API密钥，并对此进行了多次双重检查。我还关注了使用Javascript构建地图的Google教程。

以下是我在视图中的内容。

    @model Phase5.Models.Supplier

@{
    ViewBag.Title = "Details";
}


<h2>Details</h2>

<div>
    <h4>Supplier</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.SupplierName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.SupplierName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Address)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Address)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.AddressLine2)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.AddressLine2)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Postcode)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Postcode)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Phone)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Phone)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Email)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Email)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.ContactName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.ContactName)
        </dd>

    </dl>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCR40cXGAT-hM1MqQkJQZ7NLqZOlJMXg20&callback=initMap"
            async defer type="text/javascript"></script>




    <!-- This css is to ensure that the google map contols (zoom bar etc) show and size correctly. -->
    <style>
        #map_canvas img {
            max-width: none;
        }
    </style>

    <!-- This css is to give a nice big popup "info window" when a marker is clicked on the map -->
    <style>
        .infoDiv {
            height: 200px;
            width: 300px;
            -webkit-user-select: none;
            background-color: white;
        }
    </style>

    <!-- This is the div that will contain the Google Map -->
    <div id="map_canvas" style="height: 600px;"></div>

    <!-- Enclose the Javascript in a "section" so that it is rendered in the correct order after scripts have been loaded etc -->
    @section scripts {
        <section class="scripts">

            <script type="text/javascript">

        $(document).ready(function () {
            Initialize();
        });
     function codeAddress(address) {
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var myOptions = {
                        zoom: 17,
                        center: results[0].geometry.location,
                        mapTypeId: google.maps.MapTypeId.ROADMAP

                    }
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location

                    });
                    // create a marker
                    var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map ,
                        title: 'Latitude: ' + results[0].geometry.location.Ya + ' Longitude :' + results[0].geometry.location.Za
                    });
                }
            });

        }

        //Call this function with giving the address.
        codeAddress("@Model.Address + @Model.AddressLine2 + @Model.Postcode");

            </script>
        </section>
    }



    <br />

    <p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.SupplierId }) |
    @Html.ActionLink("Back to List", "Index")
</p>

我是否需要启用web.config设置才能使其完全正常工作或我缺少某些内容

非常感谢

Answer 1

感谢Hackerman，答案是从脚本中删除async defer

Google地图未显示在ASP.MVC网站中

1 个答案: