在我的服务器上配置 JavaScript Google Maps API 时出现问题

Question

我在 .net MVC 中开发了一个应用程序，它使用谷歌地图并检索用户的纬度和经度并提供植物信息。我本地电脑上的应用程序，即 Visual Studio localhost 运行良好。

我最近将应用程序部署到地图停止显示的在线服务器上。

Here's the screenshot of my view and console window

这是我的 MVC 查看代码

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAOwftJGF5aEhCpifN-pa4A8atYYW_oWMY"></script>

<script type="text/javascript">

    var lattt = "";
    var longg = "";
    var address = "";
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(p) {
            var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
            lattt = p.coords.latitude;
            longg = p.coords.longitude;
            var mapOptions = {
                center: LatLng,
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
            });
            google.maps.event.addListener(marker, "click", function(e) {
                var infoWindow = new google.maps.InfoWindow();
                infoWindow.setContent(marker.title);
                infoWindow.open(map, marker);
            });

            var latlng = new google.maps.LatLng(lattt, longg);
            var geocoder = geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'latLng': latlng }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        address = new String(results[1].formatted_address.toString());
                        $.ajax({
                            data: { latitude: lattt, longitude: longg, cityP: address },
                            url: '/User/GetCoords',
                            type: 'GET',
                            datatype: 'json',
                            success: function(response) {

                            }
                        });
                    }
                }
            });
        });
    } else {
        alert('Geo Location feature is not supported in this browser.');
    }
</script>

是的，我将 View URL 的引用添加到 Google Developer 控制台。任何形式的帮助都将不胜感激！谢谢

Answer 1

我找到了解决这个问题的方法。如果您要使用 getCurrentPosition() 等函数，Google 要求您拥有 https。

所以要在您的网站上使用谷歌地图，您可以使用此选项

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

并根据标记位置获取用户经度。

Answer 2

使用 https 而不是 http 来加载 Google Maps API 并提供地图版本作为 http 请求参数。

默认加载的 Google Maps SDK 是开发版本。在您的应用程序中首选稳定版本。