Как изменить положение маркера на карте Google?

Question

У меня есть карта Google с маркером и выбор с параметрами, содержащими места. Когда пользователь выбирает параметр, широта и долгота загружаются из запроса на успешное выполнение ajax, и, наконец, маркер на карте Google должен изменить положение.

это скрипт карты:

function initSubmitMap(_latitude,_longitude){
         var mapCenter = new google.maps.LatLng(_latitude,_longitude);
         var mapOptions = {
             zoom: 7,
             scrollwheel: false,
             center: mapCenter,
             disableDefaultUI: false,
             //scrollwheel: false,
             styles: mapStyles
         };
         var mapElement = document.getElementById('submit-map');
         var map = new google.maps.Map(mapElement, mapOptions);
         var marker = new MarkerWithLabel({
             position: mapCenter,
             map: map,
             icon: 'assets/images/marker.png',
             labelAnchor: new google.maps.Point(50, 0),
             draggable: true
         });
         $('#submit-map').removeClass('fade-map');
         google.maps.event.addListener(marker, "mouseup", function (event) {
             var latitude = this.position.lat();
             var longitude = this.position.lng();
             $('#latitude').val( this.position.lat() );
             $('#longitude').val( this.position.lng() );
         });
         /*google.maps.event.addDomListener(window, 'load', initialize);*/
          //Autocomplete
         var input = /** @type {HTMLInputElement} */( document.getElementById('address-map') );
         var autocomplete = new google.maps.places.Autocomplete(input);
         autocomplete.bindTo('bounds', map);
         google.maps.event.addListener(autocomplete, 'place_changed', function() {
             var place = autocomplete.getPlace();
             if (!place.geometry) {
                 return;
             }
             if (place.geometry.viewport) {
                 map.fitBounds(place.geometry.viewport);
             } else {
                 map.setCenter(place.geometry.location);
                 map.setZoom(17);
             }
             marker.setPosition(place.geometry.location);
             marker.setVisible(true);
             $('#latitude').val( marker.getPosition().lat() );
             $('#longitude').val( marker.getPosition().lng() );
             var address = '';
             if (place.address_components) {
                 address = [
                     (place.address_components[0] && place.address_components[0].short_name || ''),
                     (place.address_components[1] && place.address_components[1].short_name || ''),
                     (place.address_components[2] && place.address_components[2].short_name || '')
                 ].join(' ');
             }
         });

    }
    function newLocation(newLat,newLng)
    {
        map.setCenter({
            lat : newLat,
            lng : newLng
        });
    }

и это скрипт для запроса ajax:

 $('select[name=governorat_id]').mouseup(function() { 
        var id = $(this).val(); 
         $.ajax({
            type: 'get',
            url: "{{ URL::to('claim-gov-pos') }}",
            data: {
                'id': id
            },
            success:function(data){
                $("#latitude").val(data.lat);
                $("#longitude").val(data.lon);
                newLocation(parseFloat(data.lat),parseFloat(data.lon))
            }
        });
    });

я получаю карту ошибок, не определенную в функции newLocation.

Answer 1

Проблема связана с вашей областью видимости карты.

В вашей функции инициализации вы определяете свою карту как локальную переменную и, следовательно, доступны только в области действия этой функции.

Когда вы вызываете его из newLocation - переменная больше не определяется.

Взгляните на: https://www.tutorialspoint.com/es6/es6_variables.htm

Однако для быстрого исправления, без использования синтаксиса ES6 (let / const и т. Д.) Или редизайна, просто глобально объявите map, как показано ниже, я также добавил несколько комментариев, вы должны попытаться отловить ошибки и устранить их - как попытка catch, или неопределенные / нулевые проверки, просто мысль!

    var map, marker;
    function initSubmitMap(_latitude,_longitude){
             var mapCenter = new google.maps.LatLng(_latitude,_longitude);
             var mapOptions = {
                 zoom: 7,
                 scrollwheel: false,
                 center: mapCenter,
                 disableDefaultUI: false,
                 //scrollwheel: false,
                 styles: mapStyles
             };
             var mapElement = document.getElementById('submit-map');
             //this part does not declare a local variable.
             map = new google.maps.Map(mapElement, mapOptions);
             marker = new MarkerWithLabel({
                 position: mapCenter,
                 map: map,
                 icon: 'assets/images/marker.png',
                 labelAnchor: new google.maps.Point(50, 0),
                 draggable: true
             });
             $('#submit-map').removeClass('fade-map');
             google.maps.event.addListener(marker, "mouseup", function (event) {
                 var latitude = this.position.lat();
                 var longitude = this.position.lng();
                 $('#latitude').val( this.position.lat() );
                 $('#longitude').val( this.position.lng() );
             });
             /*google.maps.event.addDomListener(window, 'load', initialize);*/
              //Autocomplete
             var input = /** @type {HTMLInputElement} */( document.getElementById('address-map') );
             var autocomplete = new google.maps.places.Autocomplete(input);
             autocomplete.bindTo('bounds', map);
             google.maps.event.addListener(autocomplete, 'place_changed', function() {
                 var place = autocomplete.getPlace();
                 if (!place.geometry) {
                     return;
                 }
                 if (place.geometry.viewport) {
                     map.fitBounds(place.geometry.viewport);
                 } else {
                     map.setCenter(place.geometry.location);
                     map.setZoom(17);
                 }
                 marker.setPosition(place.geometry.location);
                 marker.setVisible(true);
                 $('#latitude').val( marker.getPosition().lat() );
                 $('#longitude').val( marker.getPosition().lng() );
                 var address = '';
                 if (place.address_components) {
                     address = [
                         (place.address_components[0] && place.address_components[0].short_name || ''),
                         (place.address_components[1] && place.address_components[1].short_name || ''),
                         (place.address_components[2] && place.address_components[2].short_name || '')
                     ].join(' ');
                 }
             });

        }

        function newLocation(newLat,newLng) {
            //check map is not defined, try catch or null check???
            map.setCenter({
                lat : newLat,
                lng : newLng
            });
        } 

С точки зрения автозаполнения:

API Карт Google v3 - Автозаполнение (адрес)