Html 带有Json文件的纬度和经度_Html_Node.js

Html 带有Json文件的纬度和经度

html node.js

Html 带有Json文件的纬度和经度,html,node.js,Html,Node.js,我想当搜索设备有很多信息包括lat lng我想在谷歌地图上的html标记我如何实现请建议 json响应最后有效期：14.59612 最后有效长度：101.03952 最新职位编号：50000 最新职位：“14.59612/101.03952；14.59047/101.02653；14.58486/101.01356 <style> html, body { height: 70%; margin: 10; padding: 0;

我想当搜索设备有很多信息包括lat lng我想在谷歌地图上的html标记我如何实现请建议

json响应

最后有效期：14.59612 最后有效长度：101.03952 最新职位编号：50000 最新职位：“14.59612/101.03952；14.59047/101.02653；14.58486/101.01356

  <style>
    html, body {
      height: 70%;
      margin: 10;
      padding: 0;
    }
    #map {
      height: 100%;
    }
  </style>
</head>
<body>
<center>
  <input type="button" value="Show my location on Map"
  onclick="javascript:showlocation()" />   <br />
  Latitude: <span id=""></span>       <br />
  Longitude: <span id="lastValidLatitude"></span>
  <br /><br />
  </center>
  <div id="map"></div>
  <script>
    var map;
    function showlocation() {
          // One-shot position request.
          navigator.geolocation.getCurrentPosition(callback);
      }

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 0, lng: 0},
        zoom: 8
      });
    }
  </script>
 <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxx&callback=initMap"
  async defer></script>


html，正文{
身高：70%；
保证金：10；
填充：0；
}
#地图{
身高：100%；
}


纬度：

经度：



var映射；
函数showlocation（）{
//一次性位置请求。
navigator.geolocation.getCurrentPosition（回调）；
}
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:0，lng:0}，
缩放：8
});
}

单击按钮后，首先初始化地图并显示用户的当前位置。然后调用API通过XHR获取所有位置并在地图上显示

var map;
function initMap() {
    var myLatlng = new google.maps.LatLng(40.779502, -73.967857);
    var myOptions = {
        zoom: 12,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);    
}

// show user's current location
function showlocation() {
      if(navigator.geolocation) {
        // One-shot position request.
        navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
      } else {
          alert("Sorry, your browser does not support HTML5 geolocation.");
      }
  }


  // Define callback function for successful attempt
  function successCallback(position) {
    var lat =  position.coords.latitude;
    var lng =  position.coords.longitude;

    var latlong = new google.maps.LatLng(lat, lng);

    var myOptions = {
        center: latlong,
        zoom: 16,
        mapTypeControl: true,
        navigationControlOptions: {
            style:google.maps.NavigationControlStyle.SMALL
        }
    }

    map = new google.maps.Map(document.getElementById("map"), myOptions);
    var marker = new google.maps.Marker({ position:latlong, map:map, title:"You are here!" });

      // show all markers from Backend API on map
      getDataFromAPI();
  }

  // Define callback function for failed attempt
  function errorCallback(error) {
    console.log('error : ', error);
  }


// Get JSON response using XHR like below. and add those to Google Maps
function getDataFromAPI() {
  var xmlhttp = new XMLHttpRequest();
  var url = "backendepiendpoint.json";

  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var myArr = JSON.parse(this.response);
      var latest_positions = data.latest_positions;
      latest_positions = latest_positions.split(';');
      latest_positions.forEach(function(location) {
        var lat = location.split('/')[0];
        var lng = location.split('/')[1];
        console.log('lat = ', lat, ' : lng = ', lng);
        if (lat && lng) {
          var marker = new google.maps.LatLng(lat, lng);
          addMarker(location);
        }
      });
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

// Function for adding a marker to the page.
function addMarker(location) {
    marker = new google.maps.Marker({
        position: location,
        map: map
    });
}