如何更改谷歌地图上的标记位置？

Question

我有一个带有标记的谷歌地图和一个带有包含地点的选项的选择。当用户选择一个选项时，从 ajax 成功请求中加载纬度和经度，最后谷歌地图上的标记必须改变位置。

这是地图的脚本：

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

问题在于您对地图的范围界定。

在您的 init 函数中，您将地图定义为局部变量，因此仅在该函数的范围内可用。

当您从 newLocation 调用它时 - 不再定义该变量。

看看：https://www.tutorialspoint.com/es6/es6_variables.htm

但是，为了快速修复，无需使用 ES6 语法（let/const 等）或重新设计，只需像下面这样全局声明 map，我还添加了一些 cmets，您应该尝试捕获错误并处理它们 -像 try catch 或 undefined/null 检查，只是一个想法！

    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
            });
        } 

在自动完成方面：

Google Maps v3 API - Auto Complete (address)