Cuando hago clic en eso, usará una página de JavaScript que marqué como una nota (//) (también probé con

Entonces el onclick no funciona, si lo hubiera hecho, habría visto el 1 en la consola.

function fun() {
  //<script src="checkcheckcheck.js"/>
  console.log("1");
}


var map;
require([
  "esri/map",
  "esri/dijit/LocateButton",
  "dojo/domReady!"
], function(Map, LocateButton) {
  map = new Map("map", {
    center: [-56.049, 38.485],
    zoom: 3,
    basemap: "streets"

  });

  geoLocate = new LocateButton({
    map: map
  }, "LocateButton");
  geoLocate.startup();

  geoLocate.on('locate', (data) => {
    console.log(data);
    var LatM = data.position.coords.latitude;
    var LongM = data.position.coords.longitude;
    localStorage.setItem("yourLocationLat", "LatM");
    localStorage.setItem("yourLocationLong", "LongM");
    console.log(LatM, LongM);
  });
});
html,
body,
#esri-map-container {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 800px;
  height: 500px;
}

#LocateButton {
  position: absolute;
  top: 95px;
  left: 20px;
  z-index: 50;
}
<link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
<script src="https://js.arcgis.com/3.35/"></script>
<div id="map" class="map">
  <div id="LocateButton" onclick="fun();"></div>
</div>
<div id="valueInsert"></div>

Mi página javascript (checkcheckcheck.js):

const pix = 3.141592653589793;
const radius = 6378.16;


function radians(x) {
  return x * pix / 180;
  console.log("2");
}

function calculateDistance(lat1, long1, lat2, long2) {
  let dlon = radians(long2 - long1);
  let dlat = radians(lat2 - lat1);

  let a = (Math.sin(dlat / 2) * Math.sin(dlat / 2)) + Math.cos(radians(lat1)) * Math.cos(radians(lat2)) * (Math.sin(dlon / 2) * Math.sin(dlon / 2));

  let angle = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return angle * radius;
  console.log("3");
}

//let yourLocationLat = 32.777777;
//let yourLocationLong = 34.999999;

let places = [{
  "name": "Tel-Aviv",
  "lat": 32.083333,
  "long": 34.7999968
}, {
  "name": "Haifa",
  "lat": 32.81841,
  "long": 34.9885

}, {
  "name": "Rehovot",
  "lat": 31.894756,
  "long": 34.809322
},{
  "name": "Berlin",
  "lat": 52.520008,
  "long": 13.404954
},{
  "name": "Alaska",
  "lat": 66.160507,
  "long": -153.369141

},{
  "name": "Mexico",
  "lat": 19.432608,
  "long": -99.133209
},{
  "name": "Jerusalem",
  "lat": 31.771959,
  "long": 35.217018
}]

let result = []; 
places.forEach((x) => {
  let resultDistance = calculateDistance(localStorage.getItem("yourLocationLat"), localStorage.getItem("yourLocationLong"), x.lat, x.long)
  let obj = {
  "city": x.name,
  "lat": x.lat,
  "long": x.long,
  "distance": resultDistance
  }

  result.push(obj);
})

// shortest first
result.sort((a, b) => {
 return a.distance - b.distance  
 console.log("4");
})

document.getElementById("valueInsert").innerHTML = result[0].city;
0
idan half 20 ene. 2021 a las 15:21

1 respuesta

La mejor respuesta

Necesita mover parte del código a una función y llamar a esa función en el evento de localización

Así que

geoLocate.on('locate', (data) => {
    var LatM = data.position.coords.latitude;
    var LongM = data.position.coords.longitude;
    getDistance(LatM,LongM); // here you call the code you want
});

Su archivo JS:

const pix = 3.141592653589793;
const radius = 6378.16;


function radians(x) {
  return x * pix / 180;
  console.log("2");
}

function calculateDistance(lat1, long1, lat2, long2) {
  let dlon = radians(long2 - long1);
  let dlat = radians(lat2 - lat1);

  let a = (Math.sin(dlat / 2) * Math.sin(dlat / 2)) + Math.cos(radians(lat1)) * Math.cos(radians(lat2)) * (Math.sin(dlon / 2) * Math.sin(dlon / 2));

  let angle = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return angle * radius;
  console.log("3");
}

//let yourLocationLat = 32.777777;
//let yourLocationLong = 34.999999;

let places = [{
  "name": "Tel-Aviv",
  "lat": 32.083333,
  "long": 34.7999968
}, {
  "name": "Haifa",
  "lat": 32.81841,
  "long": 34.9885

}, {
  "name": "Rehovot",
  "lat": 31.894756,
  "long": 34.809322
}, {
  "name": "Berlin",
  "lat": 52.520008,
  "long": 13.404954
}, {
  "name": "Alaska",
  "lat": 66.160507,
  "long": -153.369141

}, {
  "name": "Mexico",
  "lat": 19.432608,
  "long": -99.133209
}, {
  "name": "Jerusalem",
  "lat": 31.771959,
  "long": 35.217018
}]

function getDistance(lat,long) {

  let result = [];
  places.forEach((x) => {
    let resultDistance = calculateDistance(lat, long , x.lat, x.long)
    let obj = {
      "city": x.name,
      "lat": x.lat,
      "long": x.long,
      "distance": resultDistance
    }

    result.push(obj);
  })

  // shortest first
  result.sort((a, b) => {
    return a.distance - b.distance
    console.log("4");
  })

  document.getElementById("valueInsert").innerHTML = result[0].city;
}
1
mplungjan 20 ene. 2021 a las 14:30