如何使用地理定位使其遵循我的確切位置？

Question

我需要做一個餐廳查找器..但是要做到這一點，我需要能夠找到我的用戶。.我一直在努力弄清楚如何對他們進行地理位置定位並在地圖上指出他們的位置並在他們附近找到餐館..請幫助我..我是新來的

第一個js代碼

 var map, places, iw; var markers = []; var searchTimeout; var centerMarker; var autocomplete; var hostnameRegexp = new RegExp('^https?://.+?/'); function initialize() { var myLatlng = new google.maps.LatLng(37.786906, -122.410156); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); places = new google.maps.places.PlacesService(map); google.maps.event.addListener(map, 'tilesloaded', tilesLoaded); document.getElementById('keyword').onkeyup = function(e) { if (!e) var e = window.event; if (e.keyCode != 13) return; document.getElementById('keyword').blur(); search(document.getElementById('keyword').value); } var typeSelect = document.getElementById('type'); typeSelect.onchange = function() { search(); }; var rankBySelect = document.getElementById('rankBy'); rankBySelect.onchange = function() { search(); }; } function tilesLoaded() { search(); google.maps.event.clearListeners(map, 'tilesloaded'); google.maps.event.addListener(map, 'zoom_changed', searchIfRankByProminence); google.maps.event.addListener(map, 'dragend', search); } function searchIfRankByProminence() { if (document.getElementById('rankBy').value == 'prominence') { search(); } } function search() { clearResults(); clearMarkers(); if (searchTimeout) { window.clearTimeout(searchTimeout); } searchTimeout = window.setTimeout(reallyDoSearch, 500); } function reallyDoSearch() { var type = document.getElementById('type').value; var keyword = document.getElementById('keyword').value; var rankBy = document.getElementById('rankBy').value; var search = {}; if (keyword) { search.keyword = keyword; } if (type != 'establishment') { search.types = [type]; } if (rankBy == 'distance' && (search.types || search.keyword)) { search.rankBy = google.maps.places.RankBy.DISTANCE; search.location = map.getCenter(); centerMarker = new google.maps.Marker({ position: search.location, animation: google.maps.Animation.DROP, map: map }); } else { search.bounds = map.getBounds(); } places.search(search, function(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { var icon = 'number_' + (i + 1) + '.png'; markers.push(new google.maps.Marker({ position: results[i].geometry.location, animation: google.maps.Animation.DROP, icon: icon })); google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i)); window.setTimeout(dropMarker(i), i * 100); addResult(results[i], i); } } }); } function clearMarkers() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; if (centerMarker) { centerMarker.setMap(null); } } function dropMarker(i) { return function() { if (markers[i]) { markers[i].setMap(map); } } } function addResult(result, i) { var results = document.getElementById('results'); var tr = document.createElement('tr'); tr.style.backgroundColor = (i % 2 == 0 ? '#F0F0F0' : '#FFFFFF'); tr.onclick = function() { google.maps.event.trigger(markers[i], 'click'); }; var iconTd = document.createElement('td'); var nameTd = document.createElement('td'); var icon = document.createElement('img'); icon.src = 'number_' + (i + 1) + '.png'; icon.setAttribute('class', 'placeIcon'); icon.setAttribute('className', 'placeIcon'); var name = document.createTextNode(result.name); iconTd.appendChild(icon); nameTd.appendChild(name); tr.appendChild(iconTd); tr.appendChild(nameTd); results.appendChild(tr); } function clearResults() { var results = document.getElementById('results'); while (results.childNodes[0]) { results.removeChild(results.childNodes[0]); } } function getDetails(result, i) { return function() { places.getDetails({ reference: result.reference }, showInfoWindow(i)); } } function showInfoWindow(i) { return function(place, status) { if (iw) { iw.close(); iw = null; } if (status == google.maps.places.PlacesServiceStatus.OK) { iw = new google.maps.InfoWindow({ content: getIWContent(place) }); iw.open(map, markers[i]); } } } function getIWContent(place) { var content = ''; content += '<table>'; content += '<tr class="iw_table_row">'; content += '<td style="text-align: left"><img class="hotelIcon" src="' + place.icon + '"/></td>'; content += '<td><b><a href="' + place.url + '">' + place.name + '</a></b></td></tr>'; content += '<tr class="iw_table_row"><td class="iw_attribute_name">Address:</td><td>' + place.vicinity + '</td></tr>'; if (place.formatted_phone_number) { content += '<tr class="iw_table_row"><td class="iw_attribute_name">Telephone:</td><td>' + place.formatted_phone_number + '</td></tr>'; } if (place.rating) { var ratingHtml = ''; for (var i = 0; i < 5; i++) { if (place.rating < (i + 0.5)) { ratingHtml += '&#10025;'; } else { ratingHtml += '&#10029;'; } } content += '<tr class="iw_table_row"><td class="iw_attribute_name">Rating:</td><td><span id="rating">' + ratingHtml + '</span></td></tr>'; } if (place.website) { var fullUrl = place.website; var website = hostnameRegexp.exec(place.website); if (website == null) { website = 'http://' + place.website + '/'; fullUrl = website; } content += '<tr class="iw_table_row"><td class="iw_attribute_name">Website:</td><td><a href="' + fullUrl + '">' + website + '</a></td></tr>'; } content += '</table>'; return content; } google.maps.event.addDomListener(window, 'load', initialize); 

 <!-- begin snippet: js hide: false --> 

html {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(superb-seaside-restaurant-hd-wallpaper-506329.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-size: cover
}
#form {
  font: 20px"Walkway SemiBold";
  letter-spacing: 5px;
  text-align: center;
  padding-bottom: 3px;
  padding-right: 4px;
  padding-top: 3px;
  height: 35%;
  width: 50%;
  background: #ccc;
  margin-bottom: 10px;
  /* Fallback for older browsers without RGBA-support */
  background: rgba(204, 204, 204, 0.5);
  float: left;
}
#header {
  font: 20px"Josefin Slab";
  letter-spacing: 10px;
  background-color: #fff;
  color: #000;
  text-align: center;
  margin-top: 3px;
  padding: 5px;
  width: 1255px;
  background: #ccc;
  margin-bottom: 10px;
  /* Fallback for older browsers without RGBA-support */
  background: rgba(204, 204, 204, 0.5);
}
#map_canvas {
  -webkit-box-shadow: 0 0 10px #bfdeff;
  -moz-box-shadow: 0 0 5px #bfdeff;
  box-shadow: 0 0 7px #bfdeff;
  float: right;
  height: 500px;
  width: 593px;
  padding: 10px;
  margin-right: 3px;
  vertical-align: top;
}
#listing {
  font: 18pt"Nilland";
  letter-spacing: 5px;
  text-align: center;
  padding: 3px;
  height: 500px;
  width: 50%;
  background: #ccc;
  margin-bottom: 10px;
  /* Fallback for older browsers without RGBA-support */
  background: rgba(204, 204, 204, 0.5);
  float: left;
}
#footer {
  font: 18px"Nilland-Black";
  letter-spacing: 10px;
  background-color: #fff;
  color: #000;
  text-align: right;
  padding: 5px;
  height: 27px;
  width: 1255px;
  background: #ccc;
  margin-top: 3px;
  margin-bottom: 3px;
  /* Fallback for older browsers without RGBA-support */
  background: rgba(204, 204, 204, 0.5);
  float: right;
}
.placeIcon {
  width: 32px;
  height: 37px;
  margin: 4px;
}
.hotelIcon {
  width: 24px;
  height: 24px;
}
#resultsTable {
  font: 16pt"Nilland-Black";
  border-collapse: collapse;
  width: 450px;
  margin-left: 90px;
  float: left;
  background: rgba(204, 204, 204, 0.5);
}
#rating {
  font-size: 13px;
  font-family: Arial Unicode MS;
}
#keywordsLabel {
  text-align: right;
  width: 70px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
}
.iw_table_row {
  height: 18px;
}
.iw_attribute_name {
  font-weight: bold;
  text-align: right;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Map</title>
  <link href="working.css" rel="stylesheet" type="text/css" />
  <script src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
  <script src="C:\Users\beesumbernice\Documents\html\html\whole.js"></script>
  <script src="C:\Users\beesumbernice\Documents\html\html\this.js"></script>
</head>

<body>
  <div id="header">
    <h1>
        HEADER
      </h1>
  </div>
  <div id="form">
    Keywords:
    <input id="keyword" type="text" placeholder="Mexican,Italian,Chinese..." />
    <div id="controls">
      <span id="typeLabel">
      Type:
    </span>
      <select id="type">
        <option value="bar">Bars</option>
        <option value="cafe">Cafe</option>
        <option value="restaurant" selected="selected">Restaurants</option>
      </select>
      <span id="rankByLabel">
      Rank by:
    </span>
      <select id="rankBy">
        <option value="prominence">Prominence</option>
        <option value="distance" selected="selected">Distance</option>
      </select>
    </div>
  </div>

  <div id="map_canvas"></div>

  <div id="listing" style="overflow-y: scroll; height:453px;">
    <table id="resultsTable">
      <tbody id="results"></tbody>
    </table>
  </div>

  <div id="footer">
    <a href="http://mapicons.nicolasmollet.com">Maps Icons Collection</a>
    <img src="C:\Users\beesumbernice\Documents\html\html\desktop\powered-by-google-on-non-white.png" height="16" width="104"></img>
  </div>
</body>

</html>

Answer 1

嘗試這個：

<html>
<body>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
  <script>
   function initialize(){
   var mapOptions =
  {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 8
  };
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    var lat=position.coords.latitude;
    var lng=position.coords.longitude;
    var geolocate = new google.maps.LatLng(lat, lng);
    map.setCenter(geolocate);
  });
  }
   var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
 }
 google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width:300;height:300px;border:1px solid black;">        </div>
</body>
</html>

看看“這里”

Answer 2

希望這段代碼對您有所幫助

var mapInterval;
if(navigator.geolocation) {
    var intervalTime = 5; // 5 seconds inteerval
    mapInterval = window.setInterval(function(){
        navigator.geolocation.getCurrentPosition(function(position) {
        map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
    }, intervalTime*1000)
});
// Whenever you want to stop updating the location
// mapInterval