0
我正在嘗試開發一個顯示「程序位置」的視覺效果頁面。在頁面加載時，它會使用標記提取所有程序並在地圖上顯示。有一些過濾器可用於減少結果集和查看特定程序。除了頁面加載時的事實，一切都運行良好，我的結果表格正好在Google地圖div下方顯示了16條記錄，這是正確的，但我的地圖只顯示了11條記錄，這絕對不正確。我確實在創建地理編碼器變量後立即發出警報，如果我慢慢瀏覽所有警報，則同一頁顯示16個標記。我認爲它需要一些延遲功能，但即使這樣也沒有幫助。有人評論我我哪裏錯了？我的Visual Force頁面上的Google地圖不會將所有標記顯示爲提取的結果數
<apex:page sidebar="false" controller="Creative_ProgramsMap" tabStyle="Program__c" id="page" action="{!find}">
<head>
<style>
div #map_canvas { height: 450px; }
div #pageLoadMap { height: 650px;}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<script src="/soap/ajax/15.0/connection.js" type="text/javascript"></script>
<script src="/soap/ajax/15.0/apex.js" type="text/javascript"></script>
<style>
.message {
background-color: #ffc;
border-style: solid;
border-width: 1px;
color: #000;
padding: 6px 8px 6px 6px;
margin: 4px 20px;
background-image: url(/img/msg_icons/error32.png);
background-position: 10px center;
background-repeat: no-repeat;
width: 520px;
color: red;
font-weight: strong;
min-height: 30px;
margin-bottom: 20px;
padding-left: 60px;
}
</style>
<table id="contents" border="0" width="100%">
<td style= "border-style:solid; border-color:black;" width="18%">
<div align="center">
<br/>
<font style="text-align:center; font-weight:bold; font-style:italic; color:green; font-size:18px">Filters</font>
</div>
<apex:form id="form">
<br/>
<font style="font-weight:bold; font-style:italic;">Service</font>
<br/>
<apex:selectCheckboxes layout="pageDirection" title="Service" value="{!services}">
<apex:selectOptions value="{!service}"/>
</apex:selectCheckboxes>
<br/>
<font style="font-weight:bold; font-style:italic;">Category</font>
<br/>
<apex:selectCheckboxes layout="pageDirection" title="Category" value="{!categories}">
<apex:selectOptions value="{!category}"/>
</apex:selectCheckboxes>
<br/>
<font style="font-weight:bold; font-style:italic;">Status</font>
<br/>
<apex:selectCheckboxes layout="pageDirection" title="Status" value="{!statuses}">
<apex:selectOptions value="{!status}"/>
</apex:selectCheckboxes>
<br/>
<font style="font-weight:bold; font-style:italic;">Fiscal Year</font>
<br/>
<apex:selectCheckboxes layout="pageDirection" title="Fiscal Year" value="{!fiscalYears}">
<apex:selectOptions value="{!fiscalYear}"/>
</apex:selectCheckboxes>
<div align="center">
<apex:commandButton id="btnShowPrograms" value="Show Programs" title="Populates the map based on the filteration criteria." action="{!find}" />
<br/><br/>
</div>
</apex:form>
</td>
<td style= "border-style:solid; border-color:black;">
<div align="center"><apex:messages styleClass="message" /></div>
<apex:sectionHeader title="Portfolio" subtitle="Defense Centers of Excellence" />
<div align="center">
<apex:outputLabel style="font-size:12px; color:orange; font-style:italic;">Only those programs with valid Location and address show up.</apex:outputLabel>
<br />
<apex:outputLabel style="font-size:12px; color:grey; font-style:italic;">1 pin per location.</apex:outputLabel>
<br/><br/>
</div>
<apex:form id="frmResults">
<div id="pageLoadMap" style="border:6px solid; border-color:#BDBDBD"></div>
<!-- Display Results -->
<apex:pageBlock title="Found {!programs.size} Program(s)..." rendered="{!NOT(ISNULL(programs)) && programs.size > 0}" id="resultsBlock">
<apex:outputPanel id="mapResults">
<apex:pageBlockSection title="Programs on Map" columns="1" id="mapSection">
<div id="map_canvas"></div>
</apex:pageBlockSection>
</apex:outputPanel>
<apex:pageBlockSection columns="1" id="tableSection">
<div align="center">
<br/>
<font style="text-align:center; font-weight:bold; font-style:italic; color:green; font-size:18px">List of Programs by Criteria</font>
<br/><br/>
</div>
<apex:outputPanel id="tblResults">
<div id="tableResults" style="overflow:auto; height:200px;">
<apex:pageBlockTable style="border-style:solid; border-color:black;" value="{!programs}" var="program" id="programs">
<apex:column headerValue="{!$ObjectType.Program__c.fields.Name.label}">
{!program.Name}
</apex:column>
<apex:column headerValue="Program Name">
<apex:outputLink value="../{!program.Id}">{!program.Program_Name__c}</apex:outputLink>
</apex:column>
<apex:column headerValue="Workflow Status">
{!program.Workflow_Status__c}
</apex:column>
<apex:column headerValue="Branch of Service">
{!program.Branch_of_Service__c}
</apex:column>
<apex:column headerValue="Primary Program Category">
{!program.Primary_Program_Category__c}
</apex:column>
</apex:pageBlockTable>
</div>
</apex:outputPanel>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</td>
</table>
<script type="text/javascript">
window.onload = initialize();
var infos = [];
var map;
function initialize()
{
drawMapOnLoad();
//alert('Javascript Started');
var programs;
var coords;
var requestCounter;
var markers;
var balloon;
loadMap();
}
function drawMapOnLoad()
{
var mapOptions = {
center: new google.maps.LatLng(39.810556, -98.556111),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("pageLoadMap"), mapOptions);
}
function loadMap()
{
programs = {!contactsJson};
coords = [];
requestCounter = 0;
markers = [];
geocodeClientSide();
}
function geocodeClientSide()
{
//alert('Programs Length : ' + programs.length);
if(programs.length > 0)
{
for(var i = 0; i < programs.length; i++) {
++requestCounter;
var address = programs[i].Program_Location__r.BillingStreet + ' ' + programs[i].Program_Location__r.BillingCity + ' '
+ programs[i].Program_Location__r.BillingState + ' ' + programs[i].Program_Location__r.BillingCountry + ' '
+ programs[i].Program_Location__r.BillingPostalCode;
var geocoder = new google.maps.Geocoder();
alert('Program : ' + i);
geocoder.geocode({'address':address}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
coords.push(results[0].geometry.location);
}
if(--requestCounter == 0) {
drawMap();
}
});
}
}
}
}
function drawMap(){
//alert('Coords length is ' + coords.length);
var divPageLoadMap = document.getElementById("pageLoadMap");
divPageLoadMap.style.display = 'none';
var mapOptions = {
//center: coords[0],
center: new google.maps.LatLng(39.810556, -98.556111),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
if(coords.length > 0)
{
drawMarker();
}
}
function drawMarker()
{
for(var i = 0; i < coords.length; i++){
var mouseOverContentString = 'Program ID : ' + programs[i].Name + '\n' +
'Program Name : ' + programs[i].Program_Name__c + '\n' +
'Branch of Service : ' + programs[i].Branch_of_Service__c + '\n' +
'Location Name : ' + programs[i].Program_Location__r.Name;
var marker = new google.maps.Marker({map: map, position: coords[i], title:mouseOverContentString , zIndex:i});
markers.push(marker);
var infoWindowContentString = '<div id="content" style="width:200px; height:150px">' +
'<h1 id="programName">' + programs[i].Name + '</h1>' +
'<p>Program Name : <i>' + programs[i].Program_Name__c + '</i></p>' +
'<p>Program Co-ordinator : <i>' + programs[i].ProgramCoordinator__c + '</i></p>' +
'<p>Program Location : <i>' + programs[i].Program_Location__r.Name + '</i></p>' + '</div>';
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker,'click', (function(marker,infoWindowContentString,infoWindow){
return function() {
//map.setZoom(4);
//map.setCenter(marker.getPosition());
/* close the previous info-window */
closeInfos();
infoWindow.setContent(infoWindowContentString);
infoWindow.open(map,marker);infos[0]=infoWindow;
};
})(marker,infoWindowContentString,infoWindow));
}
}
function closeInfos(){
if(infos.length > 0){
/* detach the info-window from the marker ... undocumented in the API docs */
infos[0].set("marker", null);
/* and close it */
infos[0].close();
/* blank the array */
infos.length = 0;
}
}
</script>
</apex:page>
這的確是問題 「OVER_QUERY_LIMIT」。感謝您的洞察@geocodezip。現在讓座標脫機。 – Vinar