chrome 不显示谷歌地图 - javascript

Question

我的代码在 Firefox 中运行良好，但在 chrome 中不能正常运行（chrome 不显示谷歌地图）：

http://www.khadamatchi.com/frontend/Index/addAddressByUser

我的代码：

       getLocation();
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        }
        function showPosition(position) {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            getAddress(lat,lng);
            initialize(lat,lng);
        }




        //START FIND LOCATION

        var geocoder = new google.maps.Geocoder();
        var marker = null;
        var map = null;
        function initialize(lat,lng) {
            //var $latitude = document.getElementById('latitude');
           // var $longitude = document.getElementById('longitude');
            var latitude = lat;
            var longitude = lng;
            var zoom = 16;

            var LatLng = new google.maps.LatLng(latitude, longitude);

            var mapOptions = {
                zoom: zoom,
                center: LatLng,
                panControl: false,
                zoomControl: false,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
            if (marker && marker.getMap) marker.setMap(map);
            marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                title: 'Drag Me!',
                draggable: true
            });

            google.maps.event.addListener(marker, 'dragend', function(marker) {
                var latLng = marker.latLng;
               // $latitude.value = latLng.lat();
               // $longitude.value = latLng.lng();
                //console.log( );
                getAddress(latLng.lat(),latLng.lng());
            });


        }
       // initialize();
        $('#findbutton').click(function (e) {
            var address = $("#Postcode").val();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    marker.setPosition(results[0].geometry.location);
                    $(latitude).val(marker.getPosition().lat());
                    $(longitude).val(marker.getPosition().lng());
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
            e.preventDefault();
        });

        function getAddress(lat,lon)
        {
            //http://maps.googleapis.com/maps/api/geocode/json?latlng=35.706172,51.316568&sensor=true&language=fa

            $.ajax({
                url: "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat +","+lon + "&sensor=true&language=fa",
                success: function(response) {
                    //Do Something
                    console.log(response);

                    var address_components = response.results[0].formatted_address;

                    $('#address').val(address_components);
                },
                error: function(xhr) {
                    //Do Something to handle error
                }
            });

        }

Answer 1

你这里有两个错误，你在下载jQuery之前尝试执行一些jQuery相关的代码，导致错误；

Uncaught ReferenceError: $ is not defined

第 172 行示例$(document).ready(function

您还试图在加载之前对谷歌地图执行一些代码，第 632 行 var geocoder = new google.maps.Geocoder();

导致错误Uncaught ReferenceError: google is not defined

您可以在您拥有的 initalize 函数内移动地理编码器，或从 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCfbbmUkl56UuSeZ5nSOwsKTNxplmnheuU&callback=initialize&language=fa" async defer></script> 中删除异步延迟

您还在源代码中定义了两次函数初始化，这可能会在将来给您带来一些奇怪的问题，每个函数名称应该是唯一的并且描述它们的作用。

更新

对于评论，当您从谷歌地图加载中删除异步延迟时，您是否还可以从 src url 中删除 &callback=initialize。

更新 2

现在我们已经摆脱了错误，现在函数initialize中发生了一些奇怪的事情

function initialize()
{
    var tehran=new google.maps.LatLng(35.6961111,51.4230556);
    var mapProp = {
        center:tehran,
        zoom:13,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

    var myCity = new google.maps.Circle({
        center:tehran,
        radius:3000,
        strokeColor:"#0000FF",
        strokeOpacity:0.8,
        strokeWeight:2,
        fillColor:"#0000FF",
        fillOpacity:0.4
    });

    myCity.setMap(map);
}

这不起作用，如果您将其替换为;

function initMap()
{

    map = new google.maps.Map(document.getElementById('googleMap'), {
      center: {lat: 35.6961111, lng: 51.4230556},
      zoom: 13
    });
}

initMap();

地图会正确显示，之后您可以专注于自定义地图的样式。