johnteee · March 27, 2018 06:49
diff --git a/get_location_by_adress.html b/get_location_by_adress.html
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.38.1/handsontable.full.min.css" integrity="sha256-e7GfXjCNVdZOjk1j8xbbZKQ9yDgx1acnLPTOOuPRJso=" crossorigin="anonymous" />
  </head>
  <body>

    <div class="" style="float: left;">
      <div id="location-table"></div>
      <button type="button" id="location-table-button">開始取得位置</button>
    </div>

    <textarea id="location-table-json" rows="8" cols="80" readonly></textarea>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.38.1/handsontable.full.min.js" integrity="sha256-kvsN7agq8B5tMavlHrOKEzoEHhiKoeYtSVBSKmgrc8U=" crossorigin="anonymous"></script>
    <script type="text/javascript">

    var locationTableJsonEl = $('#location-table-json');
    var locationTableEl = document.getElementById('location-table');
    var locationTable = new Handsontable(locationTableEl, {
      minSpareRows: 10,

      startRows: 5,
      startCols: 4,
      colHeaders: ['name', 'address', 'latitude', 'longitude'],
      rowHeaders: true,
    });
    const RESULT_EMPTY = " ";
    const INDEX_NAME = 0;
    const INDEX_ADDRESS = 1;
    const INDEX_LATITUDE = 2;
    const INDEX_LONGITUDE = 3;
    function tableToLocationJson(data, index) {
      if (! (data && Array.isArray(data) && data.length >= 4)) {
        return {};
      }
      return {
           'name': (data[INDEX_NAME]),
           'address': (data[INDEX_ADDRESS]),
           'latitude': (data[INDEX_LATITUDE]),
           'longitude': (data[INDEX_LONGITUDE]),
           index,
      };
    }
    var inter = null;
    $("#location-table-button").on('click', function () {
      console.log(locationTable.getData().map(tableToLocationJson));
      // alert(locationTable.getData().map(tableToLocationJson));

      var addressGPS = {
        // Call done() with an object containing latitude, longitude, and prettyAddress
        // properties corresponding to the GPS coordinates and human readable form of address
        getGPS: function(address, done){
          address = address.trim();

          var url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + encodeURIComponent(address) + "&sensor=false";

          fetch(url).then(response => response.json()).then(function(response){

            if(response.results && response.results.length){
              var loc = response.results[0];

              done({
                latitude: loc.geometry.location.lat,
                longitude: loc.geometry.location.lng,
                prettyAddress: loc.formatted_address
              });
            }

          });
        }

      };

      var result = {};
      function sleep(time) {
          var stop = new Date().getTime();
          while(new Date().getTime() < stop + time) {
              ;
          }
      }
      function queryAll(index, list) {
        if (index >= list.length) {
          return;
        }

        var resultJson = "";
        for (var i = 0; i < Object.keys(result).length; i++) {
          if (result[""+i] !== RESULT_EMPTY) {
            resultJson = resultJson + (result[""+i]) + "\n";
          }
        }
        locationTableJsonEl.val(resultJson);

        let item = list[index];
        if (!(item.address)) {
          result[""+index] = RESULT_EMPTY;
        }
        if (result[""+index]) {
          queryAll(index+1, list);
          return;
        }

        console.log(result);

        try {
          addressGPS.getGPS(item.address, function(location){
            var str;
            // console.log(`${location.prettyAddress}, ${location.latitude}, ${location.longitude}`);
            // str = `${item}, ${location.latitude}, ${location.longitude}`;
            str = `'{"name":"${item.name}", "address":"${item.address}", "latitude":${location.latitude}, "longitude":${location.longitude}},'+`;
            console.log(str);

            locationTable.setDataAtCell(item.index, INDEX_LATITUDE, location.latitude);
            locationTable.setDataAtCell(item.index, INDEX_LONGITUDE, location.longitude);

            result[""+index] = str;
            queryAll(index+1, list);
            sleep(1000);
          });
        } catch (e) {
          // queryAll(index+1, list);
        }
      }

      var list = locationTable.getData().map(tableToLocationJson);

      clearInterval(inter);
      queryAll(0, list);
      inter = setInterval(function () {
        if (Object.keys(result).length < list.length) {
          console.log('restart');
          queryAll(0, list);
        }
        else {
          clearInterval(inter);
        }
      }, 10*1000);
    });


    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title></title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.38.1/handsontable.full.min.css" integrity="sha256-e7GfXjCNVdZOjk1j8xbbZKQ9yDgx1acnLPTOOuPRJso=" crossorigin="anonymous" />
	</head>
	<body>

	<div class="" style="float: left;">
	<div id="location-table"></div>
	<button type="button" id="location-table-button">開始取得位置</button>
	</div>

	<textarea id="location-table-json" rows="8" cols="80" readonly></textarea>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.38.1/handsontable.full.min.js" integrity="sha256-kvsN7agq8B5tMavlHrOKEzoEHhiKoeYtSVBSKmgrc8U=" crossorigin="anonymous"></script>
	<script type="text/javascript">

	var locationTableJsonEl = $('#location-table-json');
	var locationTableEl = document.getElementById('location-table');
	var locationTable = new Handsontable(locationTableEl, {
	minSpareRows: 10,

	startRows: 5,
	startCols: 4,
	colHeaders: ['name', 'address', 'latitude', 'longitude'],
	rowHeaders: true,
	});
	const RESULT_EMPTY = " ";
	const INDEX_NAME = 0;
	const INDEX_ADDRESS = 1;
	const INDEX_LATITUDE = 2;
	const INDEX_LONGITUDE = 3;
	function tableToLocationJson(data, index) {
	if (! (data && Array.isArray(data) && data.length >= 4)) {
	return {};
	}
	return {
	'name': (data[INDEX_NAME]),
	'address': (data[INDEX_ADDRESS]),
	'latitude': (data[INDEX_LATITUDE]),
	'longitude': (data[INDEX_LONGITUDE]),
	index,
	};
	}
	var inter = null;
	$("#location-table-button").on('click', function () {
	console.log(locationTable.getData().map(tableToLocationJson));
	// alert(locationTable.getData().map(tableToLocationJson));

	var addressGPS = {
	// Call done() with an object containing latitude, longitude, and prettyAddress
	// properties corresponding to the GPS coordinates and human readable form of address
	getGPS: function(address, done){
	address = address.trim();

	var url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + encodeURIComponent(address) + "&sensor=false";

	fetch(url).then(response => response.json()).then(function(response){

	if(response.results && response.results.length){
	var loc = response.results[0];

	done({
	latitude: loc.geometry.location.lat,
	longitude: loc.geometry.location.lng,
	prettyAddress: loc.formatted_address
	});
	}

	});
	}

	};

	var result = {};
	function sleep(time) {
	var stop = new Date().getTime();
	while(new Date().getTime() < stop + time) {
	;
	}
	}
	function queryAll(index, list) {
	if (index >= list.length) {
	return;
	}

	var resultJson = "";
	for (var i = 0; i < Object.keys(result).length; i++) {
	if (result[""+i] !== RESULT_EMPTY) {
	resultJson = resultJson + (result[""+i]) + "\n";
	}
	}
	locationTableJsonEl.val(resultJson);

	let item = list[index];
	if (!(item.address)) {
	result[""+index] = RESULT_EMPTY;
	}
	if (result[""+index]) {
	queryAll(index+1, list);
	return;
	}

	console.log(result);

	try {
	addressGPS.getGPS(item.address, function(location){
	var str;
	// console.log(`${location.prettyAddress}, ${location.latitude}, ${location.longitude}`);
	// str = `${item}, ${location.latitude}, ${location.longitude}`;
	str = `'{"name":"${item.name}", "address":"${item.address}", "latitude":${location.latitude}, "longitude":${location.longitude}},'+`;
	console.log(str);

	locationTable.setDataAtCell(item.index, INDEX_LATITUDE, location.latitude);
	locationTable.setDataAtCell(item.index, INDEX_LONGITUDE, location.longitude);

	result[""+index] = str;
	queryAll(index+1, list);
	sleep(1000);
	});
	} catch (e) {
	// queryAll(index+1, list);
	}
	}

	var list = locationTable.getData().map(tableToLocationJson);

	clearInterval(inter);
	queryAll(0, list);
	inter = setInterval(function () {
	if (Object.keys(result).length < list.length) {
	console.log('restart');
	queryAll(0, list);
	}
	else {
	clearInterval(inter);
	}
	}, 10*1000);
	});


	</script>
	</body>
	</html>