我正在尝试开发一个显示“程序位置”的视觉力页面。在页面加载时，它会获取所有程序并使用标记显示在地图上。有一些过滤器可用于减少结果集并查看特定程序。一切正常，除了页面加载时，我的结果表位于 Google 地图 div 下方，显示 16 条记录，这是正确的，但我的地图仅显示 11 条标记，绝对不正确。在创建地理编码器变量后，我确实在线上放置了一个警报，如果我慢慢地浏览所有警报，同一页面会显示 16 个标记。我认为它之间需要一些延迟功能，但即使这样也没有帮助。有人评论我哪里错了吗？
<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>
