Question

当前行为：页面会不断刷新我的位置和整个地图。

所需行为：我只想查找并显示当前位置一次，而不是连续显示。

我怎样才能做到这一点？

<!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>

Answer 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 && 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"></script>
<div id="geolocation"></div>
<div id="map-canvas"></div>

如何阻止Google Maps API自动刷新？

1 个答案: