Блог

Главная - Вопросы по программированию - Как мне остановить автоматическое обновление API Карт Google?

Как мне остановить автоматическое обновление API Карт Google?

#html #google-maps-api-3

#HTML #google-maps-api-3

Вопрос:

Текущее поведение: страница постоянно обновляет мое местоположение и всю карту.

Желаемое поведение: я хочу находить и отображать текущее местоположение только один раз, а не постоянно.

Как я могу этого добиться?

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>whereami</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>

<script type="text/javascript" src="cordova.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key= xyz " type="text/javascript"></script>
<script type="text/javascript">

function onSuccess(position) {
var lat=position.coords.latitude;
var lang=position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat,lang);
var mapOptions = {zoom: 17,center: myLatlng}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({position: myLatlng,map: map});
}

function onError(error) {}

var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 0 });
google.maps.event.addDomListener(window, 'load', onSuccess);
</script>
</head>
<body>
<div id="geolocation"></div>
<div id="map-canvas"></div>
</body>
</html>

Комментарии:

1. Не продолжайте воссоздавать map

2. Я получаю сообщение об ошибке с опубликованным кодом (если я заставлю функцию onError сделать что-то полезное …) ERROR(3): Timeout expired

3. Ну, и как? Уже получил отрицательный результат за то, что был нубом, так что ничего не теряю, спрашивая. Я погуглил, как убедиться, что переменная установлена только один раз, и, к сожалению, ничего не вышло.

Ответ №1:

Не продолжайте воссоздавать map . Создайте карту один раз (в функции «initMap»), отцентрируйте карту и поместите маркер в функцию обратного вызова watchPosition.

jsfiddle

 // global variables
var map, marker, polyline;

function initMap() {
  // initialize the global map variable
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: {
      lat: 0,
      lng: 0
    },
    zoom: 1
  });
  var watchID = navigator.geolocation.watchPosition(onSuccess, onError, {
    timeout: 5000
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

function onSuccess(position) {
  var lat = position.coords.latitude;
  var lang = position.coords.longitude;
  var myLatlng = new google.maps.LatLng(lat, lang);
  map.setCenter(myLatlng);
  map.setZoom(18);
  if (marker amp;amp; marker.setPosition)
    marker.setMap(myLatlng); // move the marker
  else // create a marker
    marker = new google.maps.Marker({
    position: myLatlng,
    map: map
  });
}

function onError(error) {
  console.log('ERROR('   error.code   '): '   error.message);
} 
 html {
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0
}
#map-canvas {
  height: 100%;
  width: 100%;
} 
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="geolocation"></div>
<div id="map-canvas"></div>
Метки: