Fatal编程技术网
  • javascript/
  • Javascript 我的视觉力量页面上的谷歌地图没有'；t将所有标记显示为获取的结果数

Javascript 我的视觉力量页面上的谷歌地图没有'；t将所有标记显示为获取的结果数

javascript google-maps-api-3 salesforce

Javascript 我的视觉力量页面上的谷歌地图没有'；t将所有标记显示为获取的结果数,javascript,google-maps-api-3,salesforce,visualforce,Javascript,Google Maps Api 3,Salesforce,Visualforce,我正在尝试开发一个显示“程序位置”的可视化force页面。在页面加载时，它使用标记获取所有程序并显示在地图上。有一些过滤器可用于减少结果集和查看特定程序。一切都很好，除了加载页面时，我的结果表就在GoogleMaps div下面显示了16条记录，这是正确的，但我的地图只显示了11条标记，这绝对是错误的。在创建geocoder变量后，我确实在线发布了一条警报，如果我慢慢浏览所有警报，同一页面会显示16个标记。我认为它需要一些延迟功能，但即使这样也无济于事。有人能评论我哪里出了问题吗 <ape

我正在尝试开发一个显示“程序位置”的可视化force页面。在页面加载时，它使用标记获取所有程序并显示在地图上。有一些过滤器可用于减少结果集和查看特定程序。一切都很好，除了加载页面时，我的结果表就在GoogleMaps div下面显示了16条记录，这是正确的，但我的地图只显示了11条标记，这绝对是错误的。在创建geocoder变量后，我确实在线发布了一条警报，如果我慢慢浏览所有警报，同一页面会显示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>


div#map_canvas{高度：450px；}
div#pageLoadMap{高度：650px；}
.留言{
背景色：#ffc；
边框样式：实心；
边框宽度：1px；
颜色：#000；
填充：6px 8px 6px 6px；
利润率：4px20px；
背景图像：url（/img/msg_icons/error32.png）；
背景位置：10px中心；
背景重复：无重复；
宽度：520px；
颜色：红色；
字体大小：粗体；
最小高度：30px；
边缘底部：20px；
左侧填充：60px；
}


过滤器


服务




类别




地位




会计年度





只有那些具有有效位置和地址的程序才会显示。


每个位置1针。





按标准列出的程序列表



{！程序名}
{！program.program_Name__c}
{！program.Workflow_Status__c}
{！program.Branch_of_Service__c}
{！program.Primary_program_Category__c}
window.onload=初始化（）；
var-infos=[]；
var映射；
函数初始化（）
{
drawMapOnLoad（）；
//警报（“Javascript已启动”）；
var程序；
var-coords；
var请求计数器；
var标记；
var气球；
loadMap（）；
}
函数drawMapOnLoad（）
{
变量映射选项={
中心：新google.maps.LatLng（39.810556，-98.556111），
缩放：4，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“pageLoadMap”），mapOptions）；
}
函数loadMap（）
{
程序={！contactsJson}；
坐标=[]；
requestCounter=0；
标记=[]；
geocodeClientSide（）；
}
函数geocodeClientSide（）
{
//警报（“程序长度：”+程序长度）；
如果（程序长度>0）
{
对于（var i=0；i0）
{
drawMarker（）；
}
}     
函数drawMarker（）
{
对于（变量i=0；i'+
“程序协调员：“+程序[i].程序协调员”\uuuu c+”
'+
“程序位置：”+程序[i]。程序位置\u r.Name+”
“+”；
var infoWindow=new google.maps.infoWindow（）；
google.maps.event.addListener（标记，'click'，（函数（标记，infoWindowContentString，infoWindow）{
返回函数（）{
//map.setZoom（4）；
//map.setCenter（marker.getPosition（））；
/*关闭“上一个信息”窗口*/
closeInfos（）；
setContent（infoWindowContentString）；
infoWindow.open（map，marker）；infos[0]=infoWindow；

        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);