重新绘制谷歌地图以查看隐藏的移动标记

Redrawing a google map to bring to view a hidden moving marker

本文关键字:隐藏 移动 新绘制 绘制 谷歌地图      更新时间:2023-09-26

我有一个在谷歌地图中移动的标记,如http://jsfiddle.net/t43kaeyr/1/

然而,有时标记在地图画布的范围内不可见,我想知道如何重新绘制地图以使移动标记可见。

我看了过去的帖子,但我似乎不能得到它的权利。这是地图画布

的css
#map_canvas {
    width: 600px;
    height: 200px;
}

代码片段(来自链接的小提琴):

var map, marker;
var startPos = [42.42679066670903, -83.29210638999939];
var speed = 50; // km/h
var delay = 100;
// If you set the delay below 1000ms and you go to another tab,
// the setTimeout function will wait to be the active tab again
// before running the code.
// See documentation :
// https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Inactive_tabs
function animateMarker(marker, coords, km_h) {
  var target = 0;
  var km_h = km_h || 50;
  coords.push([startPos[0], startPos[1]]);
  function goToPoint() {
    var lat = marker.position.lat();
    var lng = marker.position.lng();
    var step = (km_h * 1000 * delay) / 3600000; // in meters
    var dest = new google.maps.LatLng(
      coords[target][0], coords[target][1]);
    var distance =
      google.maps.geometry.spherical.computeDistanceBetween(
        dest, marker.position); // in meters
    var numStep = distance / step;
    var i = 0;
    var deltaLat = (coords[target][0] - lat) / numStep;
    var deltaLng = (coords[target][1] - lng) / numStep;
    function moveMarker() {
      lat += deltaLat;
      lng += deltaLng;
      i += step;
      if (i < distance) {
        marker.setPosition(new google.maps.LatLng(lat, lng));
        setTimeout(moveMarker, delay);
      } else {
        marker.setPosition(dest);
        target++;
        if (target == coords.length) {
          target = 0;
        }
        setTimeout(goToPoint, delay);
      }
    }
    moveMarker();
  }
  goToPoint();
}
function initialize() {
  var myOptions = {
    zoom: 16,
    center: new google.maps.LatLng(42.425175091823974, -83.2943058013916),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(startPos[0], startPos[1]),
    map: map
  });
  google.maps.event.addListenerOnce(map, 'idle', function() {
    animateMarker(marker, [
      // The coordinates of each point you want the marker to go to.
      // You don't need to specify the starting position again.
      [42.42666395645802, -83.29694509506226],
      [42.42300508749226, -83.29679489135742],
      [42.42304468678425, -83.29434871673584],
      [42.424882066428424, -83.2944130897522],
      [42.42495334300206, -83.29203128814697]
    ], speed);
  });
}
initialize();
#map_canvas {
  width: 600px;
  height: 200px;
}
<script src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>

最简单的解决方法是将地图放在移动标记的中心:

function moveMarker() {
    lat += deltaLat;
    lng += deltaLng;
    i += step;
    if (i < distance) {
            marker.setPosition(new google.maps.LatLng(lat, lng));
            map.setCenter(marker.getPosition());
            setTimeout(moveMarker, delay);
        } else {
            marker.setPosition(dest);
            map.setCenter(marker.getPosition());
            target++;
            if (target == coords.length) {
                target = 0;
        }
        setTimeout(goToPoint, delay);
    }
}

更新小提琴

另一种选择是,如果你知道标记相当接近地图覆盖的区域,你可以缩小地图,直到它是可见的。

function moveMarker() {
    lat += deltaLat;
    lng += deltaLng;
    i += step;
    if (i < distance) {
        marker.setPosition(new google.maps.LatLng(lat, lng));
        if (!map.getBounds().contains(marker.getPosition())) {
            // marker out of view, zoom out 
            map.setZoom(map.getZoom() - 1);
        }
        setTimeout(moveMarker, delay);
    } else {
        marker.setPosition(dest);
        if (!map.getBounds().contains(marker.getPosition())) {
            // marker out of view, zoom out 
            map.setZoom(map.getZoom() - 1);
        }
        target++;
        if (target == coords.length) {
            target = 0;
        }
        setTimeout(goToPoint, delay);
    }
}

更新小提琴