【问题标题】:Update the google maps marker without rebuilding the map更新谷歌地图标记而不重建地图
【发布时间】:2012-08-25 23:43:23
【问题描述】:

我正在使用这样的谷歌地图 api:

this.init_map = function(lat, lng){
var mapOptions = {
  center: new google.maps.LatLng(lat, lng),
  zoom: 17,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  map: map,
  title:"I'm Here!"
});
}

这需要 lat 和 lng,并且可以很好地绘制地图,但是当新的 lat 和 lng 变量通过 websocket 被推入这个函数时,页面不会重新加载,但是地图会用新的标记重新绘制纬度和经度位置。

我想在不重绘地图的情况下更新地图上的标记。

【问题讨论】:

标签: javascript jquery google-maps-api-3


【解决方案1】:
var map = null;
var markers = [];

this.init_map = function(){
var mapOptions = {
  center: new google.maps.LatLng(lat, lng),
 zoom: 17,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

this.addMarker = function(lat, lng, id){
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    title:"I'm Here!"
  });
  markers.push({ id: id, markerObject: marker});
}

this.updateMarkerCoordinates(lat, lng, id){
  //I let you loop the markers array, compare ids and retrieve the marker
    marker.setPosition(new google.maps.LatLng(lat, lng));
}

【讨论】:

  • 我仍然无法弄清楚,但这更多是我如何将数据输入 JS 的问题,但是是的,我想你已经回答了。谢谢
  • 这只是添加了一个标记。当您更新现有标记时,如何告诉地图重绘?
猜你喜欢
  • 2015-10-07
  • 2012-02-21
  • 1970-01-01
  • 2012-03-23
  • 1970-01-01
  • 1970-01-01
  • 2013-04-19
  • 2013-07-31
  • 2015-11-30
相关资源
最近更新 更多