本文介绍了我的Visual Force页面上的Google地图不会将所有标记显示为提取的结果数量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试开发一个显示程序位置的视觉力量页面。在页面加载时，它会使用标记提取所有程序并在地图上显示。有一些过滤器可用于减少结果集和查看特定程序。除了页面加载时的事实，一切都运行良好，我的结果表格正好在Google地图div下方显示了16条记录，这是正确的，但我的地图只显示了11条记录，这绝对不正确。我确实在创建地理编码器变量后立即发出警报，如果我慢慢浏览所有警报，则同一页显示16个标记。我认为它需要一些延迟功能，但即使这样也没有帮助。
< apex：page sidebar =falsecontroller =Creative_ProgramsMaptabStyle =Program__cid =pageaction ={！find}>
< head>
< style>
div #map_canvas {height：450px; }
div #pageLoadMap {height：650px;}
< / style>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< / head>
< script src =/ soap / ajax / 15.0 / connection.jstype =text / javascript>< / script>
< script src =/ soap / ajax / 15.0 / apex.jstype =text / javascript>< / script>
< style>
.message {
background-color：#ffc;
border-style：solid;
border-width：1px;
颜色：＃000;
padding：6px 8px 6px 6px;
margin：4px 20px;
background-image：url（/img/msg_icons/error32.png）;
background-position：10px center;
背景重复：不重复;
width：520px;
颜色：红色;
font-weight：strong;
min-height：30px;
margin-bottom：20px;
padding-left：60px;
}
< / style>
< table id =contentsborder =0width =100％>
< td style =border-style：solid; border-color：black;宽度= 18％ >
< div align =center>
< br />
< font style =text-align：center; font-weight：bold; font-style：italic; color：green; font-size：18px>过滤< / font>
< / div>
< apex：form id =form>
< br />
< font style =font-weight：bold; font-style：italic;>服务< / font>
< br />
< apex：selectCheckboxes layout =pageDirectiontitle =Servicevalue ={！services}>
< apex：selectOptions value ={！service}/>
< / apex：selectCheckboxes>
< br />
< font style =font-weight：bold; font-style：italic;>类别< / font>
< br />
< apex：selectOptions value ={！category}/>
< / apex：selectCheckboxes>
< br />
< font style =font-weight：bold; font-style：italic;>状态< / font>
< br />
< apex：selectOptions value ={！status}/>
< / apex：selectCheckboxes>
< br />
< font style =font-weight：bold; font-style：italic;>会计年度< / font>
< br />
< apex：selectOptions value ={！fiscalYear}/>
< / apex：selectCheckboxes>
< div align =center>
< br />< br />
< / div>
< / apex：form>
< / td>
< td style =border-style：solid; border-color：black;>
< div align =center>< apex：messages styleClass =message/>< / div>
< div align =center>
< br />
< br />< br />
< / div>
< div id =pageLoadMapstyle =border：6px solid; border-color：#BDBDBD>< / div>
< apex：pageBlock title =Found {！programs.size} Program（s）...rendered ={！NOT（ISNULL（programs））&& program.size> 0} id =resultsBlock>
< div id =map_canvas>< / div>
< / apex：pageBlockSection>
< / apex：outputPanel>
< apex：pageBlockSection columns =1id =tableSection>
< div align =center>
< br />
< font style =text-align：center; font-weight：bold; font-style：italic; color：green; font-size：18px>按标准分类的程序列表< / font>
< br />< br />
< / div>
< apex：outputPanel id =tblResults>
< div id =tableResultsstyle =overflow：auto; height：200px;>
< apex：pageBlockTable style =border-style：solid; border-color：black; value ={！programs}var =programid =programs>
< apex：column headerValue ={！$ ObjectType.Program__c.fields.Name.label}>
{！program.Name}
< / apex：column>
< apex：column headerValue =程序名称>
< / apex：column>
< apex：column headerValue =工作流程状态>
{！program.Workflow_Status__c}
< / apex：column>
< apex：column headerValue =服务分支>
{！program.Branch_of_Service__c}
< / apex：column>
< apex：column headerValue =主程序类别>
{！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;
函数initialize（）
{
drawMapOnLoad（）;
// alert（'Javascript已启动'）;
var programs;
var coords;
var requestCounter;
var markers;
var balloon;
loadMap（）;
}
函数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）;
}
函数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（）;
}
}）;
$ b函数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（）;
函数drawMarker（）
{
for（var i = 0; i var mouseOverContentString ='Program ID：'+ programs [i] .Name +'\\\
'+
'Program Name：'+ programs [i] .Program_Name__c +'\\\
'+
'服务分支：'+程序[i] .Branch_of_Service__c +'\ n'+
'位置名称：'+ 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 =contentstyle =width：200px; height：150px>'+
'< h1 id =programName> '+程序[i] .Name +'< / h1>'+
'< p>节目名称：< i> +节目[i] .Program_Name__c +'< / i>< / p>'+
'< p>节目协调员：< i>'+节目[i] .ProgramCoordinator__c +'< / i>< / p>'+
' < p>程式位置：< i>'+程式[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（））;
/ *关闭以前的信息窗口* /
closeInfos（）;
infoWindow.setContent（infoWindowContentString）;
infoWindow.open（map，marker）; infos [0] = infoWindow;
};
}）（marker，infoWindowContentString，infoWindow））;
函数closeInfos（）{
if（infos.length> 0）{
/ *将信息窗口从marker ...未记录在API文档中* /
infos [0] .set（marker，null）;
/ *并关闭它* /
infos [0] .close（）;
/ *空白数组* /
infos.length = 0;
}
}
< / script>
< / apex：page>
解决方案
您遇到Geocoder错误OVER_QUERY_LIMIT在运行速率限制之前，您可以快速对大约11个地址进行地理编码）。要验证添加其他状态检查：
geocoder.geocode（{'address'：address}，function（results，状态）{
if（status == google.maps.GeocoderStatus.OK）{
coords.push（results [0] .geometry.location）;
} else alert（Geocode failed ，status =+ status）;
选项：
- 离线对地址进行地理编码，并使用坐标显示标记而不是地址
- 在
I am trying to develop a visual force page which shows "Program Locations". On page load it fetches all the programs and displays on the map using a marker. There are some filters available to reduce the result set and view specific programs. Everything works well except for the fact when page loads, my results table just below the Google maps div shows 16 record which is correct but my map shows only 11 marker definitely incorrect. I did put an alert on line just after creating geocoder variable and if I go through all the alerts slowly the same page shows 16 markers. I thought it needs some delay function in between but even that didn't help. Ca somebody comment me where am I going wrong?
<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>
解决方案
You are running into the Geocoder error OVER_QUERY_LIMIT (from experience you can geocode approximately 11 addresses quickly before running into the rate limit). To verify add an else to the status check:
geocoder.geocode({'address':address}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
coords.push(results[0].geometry.location);
} else alert("Geocode failed, status = "+status);
Options:
- geocode your addresses offline and use the coordinates to display the markers rather than the addresses
- see this question on SO for a way to throttle the geocode requests
这篇关于我的Visual Force页面上的Google地图不会将所有标记显示为提取的结果数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！