我正在使用Google Maps V3显示一些图钉。我希望能够刷新标记而不影响您在地图上的位置或缩放级别。我希望标记每x秒更新一次。
我将如何去做?我在jQuery / ajax方面没有太多经验。
我的地图的工作示例如下。
http://jsfiddle.net/dLWNc/
var locations = [ ['some random info here', -37.8139, 144.9634, 1], ['some random info here', 46.0553, 14.5144, 2], ['some random info here', -33.7333, 151.0833, 3], ['some random info here', 27.9798, -81.731, 4], ]; var map = new google.maps.Map(document.getElementById('map_2385853'), { zoom: 1, maxZoom: 8, minZoom: 1, streetViewControl: false, center: new google.maps.LatLng(40, 0), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); }
谢谢
好的,我有一些工作-很大程度上是对原始代码的大量重构-您会认识到各种不同的块。
$(function() { var locations = {};//A repository for markers (and the data from which they were constructed). //initial dataset for markers var locs = { 1: { info:'11111. Some random info here', lat:-37.8139, lng:144.9634 }, 2: { info:'22222. Some random info here', lat:46.0553, lng:14.5144 }, 3: { info:'33333. Some random info here', lat:-33.7333, lng:151.0833 }, 4: { info:'44444. Some random info here', lat:27.9798, lng:-81.731 } }; var map = new google.maps.Map(document.getElementById('map_2385853'), { zoom: 1, maxZoom: 8, minZoom: 1, streetViewControl: false, center: new google.maps.LatLng(40, 0), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var auto_remove = true;//When true, markers for all unreported locs will be removed. function setMarkers(locObj) { if(auto_remove) { //Remove markers for all unreported locs, and the corrsponding locations entry. $.each(locations, function(key) { if(!locObj[key]) { if(locations[key].marker) { locations[key].marker.setMap(null); } delete locations[key]; } }); } $.each(locObj, function(key, loc) { if(!locations[key] && loc.lat!==undefined && loc.lng!==undefined) { //Marker has not yet been made (and there's enough data to create one). //Create marker loc.marker = new google.maps.Marker({ position: new google.maps.LatLng(loc.lat, loc.lng), map: map }); //Attach click listener to marker google.maps.event.addListener(loc.marker, 'click', (function(key) { return function() { infowindow.setContent(locations[key].info); infowindow.open(map, locations[key].marker); } })(key)); //Remember loc in the `locations` so its info can be displayed and so its marker can be deleted. locations[key] = loc; } else if(locations[key] && loc.remove) { //Remove marker from map if(locations[key].marker) { locations[key].marker.setMap(null); } //Remove element from `locations` delete locations[key]; } else if(locations[key]) { //Update the previous data object with the latest data. $.extend(locations[key], loc); if(loc.lat!==undefined && loc.lng!==undefined) { //Update marker position (maybe not necessary but doesn't hurt). locations[key].marker.setPosition( new google.maps.LatLng(loc.lat, loc.lng) ); } //locations[key].info looks after itself. } }); } var ajaxObj = {//Object to save cluttering the namespace. options: { url: "........",//The resource that delivers loc data. dataType: "json"//The type of data tp be returned by the server. }, delay: 10000,//(milliseconds) the interval between successive gets. errorCount: 0,//running total of ajax errors. errorThreshold: 5,//the number of ajax errors beyond which the get cycle should cease. ticker: null,//setTimeout reference - allows the get cycle to be cancelled with clearTimeout(ajaxObj.ticker); get: function() { //a function which initiates if(ajaxObj.errorCount < ajaxObj.errorThreshold) { ajaxObj.ticker = setTimeout(getMarkerData, ajaxObj.delay); } }, fail: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown); ajaxObj.errorCount++; } }; //Ajax master routine function getMarkerData() { $.ajax(ajaxObj.options) .done(setMarkers) //fires when ajax returns successfully .fail(ajaxObj.fail) //fires when an ajax error occurs .always(ajaxObj.get); //fires after ajax success or ajax error } setMarkers(locs);//Create markers from the initial dataset served with the document. //ajaxObj.get();//Start the get cycle. // ******************* //test: simulated ajax /* var testLocs = { 1: { info:'1. New Random info and new position', lat:-37, lng:124.9634 },//update info and position and 2: { lat:70, lng:14.5144 },//update position 3: { info:'3. New Random info' },//update info 4: { remove: true },//remove marker 5: { info:'55555. Added', lat:-37, lng:0 }//add new marker }; setTimeout(function() { setMarkers(testLocs); }, ajaxObj.delay); */ // ******************* });
在代码的底部,您将找到一个testLocs数据集,展示了在应用初始数据集后添加/删除/更新标记的可能性范围。
testLocs
我还没有完全测试过ajax,但是已经使用testLocs数据集对其进行了模拟。
见 演示
10秒钟后,testLocs将被应用,您将看到标记的各种变化(以及信息窗口中显示的信息)。请特别注意,更新数据不需要完整-只需指定更改即可。
您需要安排服务器:
locs
我已经包含了获取新数据集所需的所有客户端代码。您需要做的只是:
url: "........",
url: "get_markers.php"
ajaxObj.get();
我添加了一个名为的布尔“行为开关” auto_remove。设置为true时,将运行一小段额外的代码块,从而删除所有未报告位置的标记。
auto_remove
这将允许您在每次迭代中报告所有 活动 标记。删除将自动进行,而无需主动命令它们。
响应的代码{ remove: true }仍然存在,因此,如果需要,可以明确命令(将auto_remove设置为false)删除。
{ remove: true }
false
更新了 演示
PHP脚本应构建以下形式的数组:
<%php $testLocs = array( 'loc1' => array( 'info' => '1. New Random info and new position', 'lat' => 0, 'lng' => 144.9634 ), 'loc2' => array( 'lat' => 0, 'lng' => 14.5144 ), 'loc3' => array( 'info' => '3. New Random info' ), 'loc5' => array( 'info' => '55555. Added', 'lat' => 0, 'lng' => 60 ) ); echo json_encode($testLocs); exit(); %>
我不确定PHP是否会处理数字键。如果没有,那么试试字符串'1','2'等等。这也可能是最安全的给所有按键字母前缀,例如。'loc1','loc2'等等。无论你选择做什么,请务必在JavaScript的按键locs对象是同一类型和组成。
'1'
'2'
'loc1'
'loc2'