地理定位后 google maps addlistener 点击 stop working

Posted 2023-02-23

【中文标题】地理定位后 google maps addlistener 点击 stop working

【英文标题】：after a geolocation google maps addlistener click stop working

【发布时间】：2017-10-26 13:17:53

【问题描述】：

我有一个表格来放置用户可以点击谷歌地图的地址，输入国家，庄园，县，地址会自动填写，但如果用户想用文本填写输入，自动地理定位地图。这两个功能都可以正常工作，但是在用户填写输入文本并完成地理定位后，如果我点击地图，addlistener 将不再工作。

整个代码很长，所以我把最重要的部分放在这里

function geolocalizarTM()
console.log("entre en geolocalizarTM");
var gmap, divmap;
divmap = $('#map');
d1  = document.getElementById('direccion1').value; 
d2 = document.getElementById('direccion2').value; 
num = document.getElementById('numero').value; 
codp = document.getElementById('codigo_postal').value; 
prov = document.getElementById('provincia_id').value;
pob = document.getElementById('poblacion_id').value;
country = document.getElementById('pais_id').value;
if((d1!="")&& (codp!="")&&(prov!="")&&(pob!="")&&(country!=""))
    direccionText = d1 + "," + num + "," + codp + "," + prov + "," + pob + "," + country;                    
    $.ajax(
        type: "GET",
        url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + direccionText + "&key=AIzaSyCy96_rJ419QasmI4RaJs3uHO-PUh-bNuc",
        dataType: "json",
        success: processJSON
    );
function processJSON(json) 
    lat = json.results[0].geometry.location.lat;
    lon = json.results[0].geometry.location.lng;

    latLon = new google.maps.LatLng(lat, lon);
    objConfig = new Object();

    objConfig.zoom = 18;
    objConfig.center = latLon;
    gmap = new google.maps.Map(divmap[0], objConfig);

    var marker = new google.maps.Marker(
        position: latLon,
        map: gmap,
    );
    directionsDisplay.setMap(gmap);
    marker.setMap(gmap);
    

;


var ul = document.getElementById('panelContenedor');
var directionDisplay;
var directionsService;
var lat, lon, latLon, objConfig, ubicacionProd;
ubicacionProd = "";

var gmap, divmap;
divmap = $('#map');
showMap();
function showMap() 
    navigator.geolocation.getCurrentPosition(fn_ok, fn_error);

function fn_error() 
    console.log('geolocalizacion, ha ocurrido un error...');

function fn_ok(resp) 
    console.log("inicializo el mapa");
    lat = resp.coords.latitude;
    lon = resp.coords.longitude;
    latitud = document.getElementById("latitud").value;
    longitud = document.getElementById("longitud").value;
    if (latitud != "" && longitud != "") 
        lat = latitud;
        lon = longitud;
    
   latLon = new google.maps.LatLng(lat, lon);
   objConfig = new Object();
   objConfig.zoom = 18;
   objConfig.center = latLon;
   gmap = new google.maps.Map(divmap[0], objConfig);

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var marker = new google.maps.Marker(
    position: latLon,
);
directionsDisplay.setMap(gmap);

marker.setMap(gmap);

google.maps.event.addListener(gmap, 'click', function (e) 
    fx(e.latLng);
);

function fx(latLng) 
    console.log("pinche el mapa");
    marker.setMap(null);
    $('#localizacion').val(latLng);
    var request = 
        origin: latLng,
        destination: latLng,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    ;
    directionsService.route(request, function (response, status) 
        console.log(response);

    if (status == google.maps.DirectionsStatus.OK) 
        var point = response.routes[0].legs[0];
        marker.setOptions(map: gmap, position: point.start_location);
        gmap.setCenter(point.start_location);
        var direction = response.routes[0].legs[0].start_address.split(",");

    
        /****aqui debo llenar los campos de la direccion****/
        console.log("Direccion: [0]" + direction[0] + "** [1]" + direction[1] + "** [2]" + direction[2] + "** [3]" + direction[3] + "** [4]" + direction[4] + '\n');
        var num_posiciones = direction.length; // determinamos el numero de campos que trae el arreglo
        /* blanqueo las cajitas*/
        $('#direccion1').val("");
        $('#direccion2').val("");
        $('#pais_id').val("");
        $('#provincia_id').val("");
        $('#numero').val("");
        $('#codigo_postal').val("");
        $('#poblacion_id').val("");
        /*

        ** here I fill the inputs ***

        */
    );

希望你能帮助我，非常感谢。

【问题讨论】：

请提供一个minimal reproducible example 来证明这个问题。

【参考方案1】：

我已经解决了这个问题。我是在处理Json函数之后没有调用函数fn_ok()。这就是 google.maps.event.addListener(gmap, 'click', function (e) 不起作用的原因。

所以，我希望这篇文章对某人有用。