Question

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

第一个js代码

＆＃13;

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);

＆＃13;

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

＆＃13;

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

如何使用地理定位来跟踪我的确切位置？

2 个答案: