Google지도 api 아약스 다시로드 마커

Question

전체지도를 다시로드하는 마커를 다시로드하려면 Google지도가 필요합니다 ... 목적을 추적하기 위해 .... 또한지도를 다시로드하지 않고 트래픽 표시/숨기기 ... 예. 당신의 데이터를로드,지도를 그릴 수있는 기능을 가지고 기능 -이 위치를 업데이트 있도록 매 15 초

여기 내 코드

당신은 당신의 코드를 모듈화 할 필요가

function loadmap2(i) { 
    var map = new google.maps.Map(document.getElementById("map2"), { 
    center: new google.maps.LatLng(40.742575,-73.874932), //40.671037,-73.991976 40.710313,-73.858452 
    zoom: 11, 
    mapTypeId: 'roadmap' 
    }); 

if (i == 'traffic') {traffic();} else {}; 

function traffic() { 
var trafficLayer = new google.maps.TrafficLayer(); 
trafficLayer.setMap(map); 
} 
    var infoWindow = new google.maps.InfoWindow; 
    // Change this depending on the name of your PHP file 
    downloadUrl("markers_trucks_xml.cfm?date=<cfoutput>#URL.date#</cfoutput>", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
    var id = markers[i].getAttribute("id"); 
var icon = markers[i].getAttribute("icon");//icon 
    var color = markers[i].getAttribute("color");//color 
var type = markers[i].getAttribute("type"); 
var data1 = markers[i].getAttribute("data1"); 
    var data2 = markers[i].getAttribute("data2"); 
    var data3 = markers[i].getAttribute("data3"); 
    var data4 = markers[i].getAttribute("data4"); 
    var data5 = markers[i].getAttribute("data5"); 
    var data6 = markers[i].getAttribute("data6"); 
    var data7 = markers[i].getAttribute("data7"); 
    var data8 = markers[i].getAttribute("data8"); 
    var data9 = markers[i].getAttribute("data9"); 
    var data10 = markers[i].getAttribute("data10"); 

    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
var ind = i; 
var ind= ind + 1; 
if(type == 'truck') 
{ 
var html = "<b><a href='da.cfm?id="+id+"'>"+data1+"</a></b><br />"+"Order # <b>"+data2+" &nbsp;&nbsp;"+data3+"</b> <i>lbs</i><br />" + "<br/><br/>" + data5 + "<br />" + data6 + "<br/>" + data7 + "<br/>" + data8 +"<br />"+ data9; 
var icon = "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|"+icon+"|"+color+"|000000"; 
} 
else if(type == 'track') 
{ 
var html = "<b><a href='da1.cfm?id="+id+"'>"+data1+"</a></b><br />"+"<b>"+data3+"</b>&nbsp;MPH&nbsp;-&nbsp;Engine&nbsp;<b>"+data7+"</b><br /><br/>Last Read&nbsp;" + data4 + "<br />Stop Duration&nbsp;" + data5 + "<br/>Recent Movement&nbsp;" + data6 + "<br/>Location&nbsp;" + data8 +"&nbsp;&nbsp;"+ data9; 
var icon = "https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bbT|"+icon+"|"+color+"|000000"; 
} 

var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon, 
    title: data1, 
     shadow: icon.shadow 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
    }; 


    }); 

}; 


function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 
    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 
    request.open('GET', url, true); 
    request.send(null); 
} 

function doNothing() {} 

// This function picks up the click and opens the corresponding info window 
    function myclick(i) { 
    gmarkers[i].openInfoWindowHtml(htmls[i]); 
    } 

Answer 1

입니다 ... 마커를 다시로드 처음에는 마커를 그리는 (그리고 전역 마커 배열을 채 웁니다) 마커 위치를 업데이트하는 함수입니다. 궁극적으로 모든 마커 개체를 배열에 저장하려고합니다. 당신이 마커 '의 위치를 ​​업데이트 할 때 나중에 문서로드에 을해야이 코드의 실행

//your global marker array for storing marker objects 
    var globalMarkers; 

    function init() { 
    //initialise your map 

//draw the initial set of markers 
drawMarkers(); 
    } 
    function loadData() { 
    //define return array 
    var data = []; 

    //load your data here 
    //loop through data as you do 

    //store marker points 
    data[i].point = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("lat")), 
       parseFloat(markers[i].getAttribute("lng"))); 

    //add other data if you wish 

    //return a simple array of marker data - do not add them to the map yet 
    return data; 
    } 

    function drawMarkers() { 
    var markers = loadData(); 
    for (var i=0;i<markers.length;i++) { 

    var marker = new google.maps.Marker({ 
      map: map, 
      position: markers[i].point, 
      icon: icon, 
     title: data1, 
      shadow: icon.shadow 
      }); 
    } 
    //save your marker in a global array for updating later 
    globalMarkers.push(marker); 
    } 

    //this function updates position of markers with new data - you will be calling this one on a timer 
    function updateMarkers() { 
//load new data 
data = loadData(); 
    //loop through array of marker objects and update their position with new data 
    for (var i=0;i<globalMarkers.length;i++) { 
    globalMarkers[i].setPosition(data[i].point); 
    } 

    } 

위해 (당신이지도를 마커를 지우거나 다시 초기화 할 필요가 없습니다) 참조로 배열을 사용 지도를 init() 한 다음 나중에 타이머에서 updateMarkers 만 호출하십시오.