我如何使它跟随我的确切位置使用地理位置？

Question

我需要做一个餐厅发现者..但要做到这一点，我需要能够找到我的用户..我一直很难搞清楚如何地理定位他们，并查明他们在地图上的位置，并找到餐馆近them..please帮助我..我是新来这个

首先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> 

检查出来"HERE"

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