1

Tengo la siguiente pagina que es para saber la ubicación mediante la dirección ip, tengo un input donde se ingresa la ip, al dar enter nos muestra unos datos en un div info que son la dirección IP, la ubicación, la zona horaria y el isp, esos datos me los muestran bien cada que pongo otra ip, en el mapa, al ingresar por primera vez un ip me muestra los datos y su ubicación en el mapa, pero al poner otra ip, solo me cambia los datos y la ubicación se queda en el mismo lugar que la anterior, ¿Alguna idea de como al poner otra ip también me de su ubicación en el mapa?.

ip.addEventListener('keypress', buscarIp)

function buscarIp(){
    teclaEnter = event.keyCode;
    if(teclaEnter == 13){
        let ipValor = document.querySelector('#ip').value
        let api = `https://geo.ipify.org/api/v1?apiKey=at_qp3qhS3ma9WCYqA4Y7teThm5gQW6p&ipAddress=${ipValor}`

        console.log(ipValor)
        

        fetch(api)
        .then(result => result.json())
        .then(data => {
            let id = document.getElementById('id');
            id.innerHTML = `
                <p>${data.ip}</p>
            `
            let town = document.getElementById('town');
            town.innerHTML = `
                <p>${data.location.city}</p>
            `
            let time = document.getElementById('time');
            time.innerHTML = `
                <p>${data.location.timezone}</p>
            `
            let isp = document.getElementById('isp');
            isp.innerHTML = `
                <p>${data.isp}</p>
            `
            let long = data.location.lat;
            let lat = data.location.lng;
            console.log(long,lat)
            
            console.log(data)

            let map = L.map('map').setView([`${long}`, `${lat}`], 13);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            L.marker([`${long}`, `${lat}`]).addTo(map)
                .openPopup();
        })
        .catch(err => console.log(err))
    }
}
header {
    background-image: url(../images/pattern-bg.png);
    text-align: center;
    height: 250px;
    background-size: cover;
    background-position: center;
  }
  
  header .content-header {
    width: 90%;
    margin: 0 auto;
    position: relative;
  }
  
  header .content-header h1 {
    color: white;
    font-size: 1.3rem;
    font-weight: 400;
    padding: 20px 0;
  }
  
  header .content-header .input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
  header .content-header .input input {
    width: 90%;
    height: 45px;
    outline: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: none;
    padding: 0 10px;
    font-size: 1rem;
  }
  
  header .content-header .input img {
    background: black;
    padding: 17px 22px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  header .content-header .input img:hover {
    background: #2b2b2b;
    cursor: pointer;
  }
  
  header .content-header .info {
    background: white;
    border-radius: 14px;
    margin-top: 20px;
    position: absolute;
    left: 50%;
    z-index: 9999;
  }
  
  header .content-header .info p {
    color: #969696;
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    padding-top: 15px;
  }
  
  header .content-header .tags {
    height: 70px;
  }
  
  header .content-header .tags .ip-info span {
    color: black;
    font-size: 1.1rem;
    font-weight: 500;
  }

  header .content-header .tags .ip-info span p{
    color:black;
    font-size: 1.1rem;
    padding-top: 6px;
  }

  .map{
    width: 100%;
    height: 700px;
    z-index: 999;
  }
<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
</head>


<div class="container">
        <header>
            <div class="content-header">
                <h1>IP Address Tracker</h1>
                <div class="input">
                    <input id="ip" type="text" placeholder="Search for any IP address or domain" v-model='query'>
                    <a href="#" class="btnBuscar" ><img src="images/icon-arrow.svg" id="search_btn"></a>
                </div>
                <div class="info" id="info">
                    <div class="ip tags">
                        <p>IP Address</p>
                        <div class="ip-info">
                            <span id="id"></span>
                        </div>
                    </div>

                    <div class="location tags">
                        <p>Location</p>
                        <div class="ip-info">
                            <span id="town"></span>
                        </div>
                    </div>

                    <div class="timezone tags">
                        <p>Timezone</p>
                        <div class="ip-info">
                            <span id="time"></span>
                        </div>
                    </div>

                    <div class="isp tags">
                        <p>ISP</p>
                        <div class="ip-info">
                            <span id="isp"></span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="map" id="map"> 

        </div>
    </div>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>

1 respuesta 1

2

Quizá no te has fijado pero en la consola del navegador queda el siguiente error en un script de los que usas: map container is already initialized

Entonces para solventar eso bastará preguntarnos si el map existe, en caso de que exista lo podemos poner null para volver a generarlo con la nueva ubicación.

Entonces para eso insertaremos el siguiente código antes de la declaración del map.

var container = L.DomUtil.get('map');
if (container != null) {
    container._leaflet_id = null;
}

ip.addEventListener('keypress', buscarIp)

function buscarIp() {
  teclaEnter = event.keyCode;
  if (teclaEnter == 13) {
    let ipValor = document.querySelector('#ip').value
    let api = `https://geo.ipify.org/api/v1?apiKey=at_qp3qhS3ma9WCYqA4Y7teThm5gQW6p&ipAddress=${ipValor}`

    console.log(ipValor)


    fetch(api)
      .then(result => result.json())
      .then(data => {
        let id = document.getElementById('id');
        id.innerHTML = `
                <p>${data.ip}</p>
            `
        let town = document.getElementById('town');
        town.innerHTML = `
                <p>${data.location.city}</p>
            `
        let time = document.getElementById('time');
        time.innerHTML = `
                <p>${data.location.timezone}</p>
            `
        let isp = document.getElementById('isp');
        isp.innerHTML = `
                <p>${data.isp}</p>
            `
        let long = data.location.lat;
        let lat = data.location.lng;
        console.log(long, lat)

        console.log(data)
        var container = L.DomUtil.get('map');
        if (container != null) {
          container._leaflet_id = null;
        }
        let map = L.map('map').setView([`${long}`, `${lat}`], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);



        L.marker([`${long}`, `${lat}`]).addTo(map)
          .openPopup();
      })
      .catch(err => console.log(err))
  }
}
header {
  background-image: url(../images/pattern-bg.png);
  text-align: center;
  height: 250px;
  background-size: cover;
  background-position: center;
}

header .content-header {
  width: 90%;
  margin: 0 auto;
  position: relative;
}

header .content-header h1 {
  color: white;
  font-size: 1.3rem;
  font-weight: 400;
  padding: 20px 0;
}

header .content-header .input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

header .content-header .input input {
  width: 90%;
  height: 45px;
  outline: none;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border: none;
  padding: 0 10px;
  font-size: 1rem;
}

header .content-header .input img {
  background: black;
  padding: 17px 22px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

header .content-header .input img:hover {
  background: #2b2b2b;
  cursor: pointer;
}

header .content-header .info {
  background: white;
  border-radius: 14px;
  margin-top: 20px;
  position: absolute;
  left: 50%;
  z-index: 9999;
}

header .content-header .info p {
  color: #969696;
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 15px;
}

header .content-header .tags {
  height: 70px;
}

header .content-header .tags .ip-info span {
  color: black;
  font-size: 1.1rem;
  font-weight: 500;
}

header .content-header .tags .ip-info span p {
  color: black;
  font-size: 1.1rem;
  padding-top: 6px;
}

.map {
  width: 100%;
  height: 700px;
  z-index: 999;
}
<head>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
</head>


<div class="container">
  <header>
    <div class="content-header">
      <h1>IP Address Tracker</h1>
      <div class="input">
        <input id="ip" type="text" placeholder="Search for any IP address or domain" v-model='query'>
        <a href="#" class="btnBuscar"><img src="images/icon-arrow.svg" id="search_btn"></a>
      </div>
      <div class="info" id="info">
        <div class="ip tags">
          <p>IP Address</p>
          <div class="ip-info">
            <span id="id"></span>
          </div>
        </div>

        <div class="location tags">
          <p>Location</p>
          <div class="ip-info">
            <span id="town"></span>
          </div>
        </div>

        <div class="timezone tags">
          <p>Timezone</p>
          <div class="ip-info">
            <span id="time"></span>
          </div>
        </div>

        <div class="isp tags">
          <p>ISP</p>
          <div class="ip-info">
            <span id="isp"></span>
          </div>
        </div>
      </div>
    </div>
  </header>

  <div class="map" id="map">

  </div>
</div>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.