升级到9.0后,Google地图自定义控件无法在移动设备xpage上运行

时间:2013-10-10 07:25:31

标签: google-maps xpages

我在移动XPage应用程序中使用Google地图自定义控件(http://www.openntf.org/catalogs/a2cat.nsf/topicThread.xsp?action=openDocument&documentId=068D8F976D87B29E852578B200259707)。这在8.5.3中有效 - 但在将服务器升级到9.0后,它不再起作用了。

我现在试图缩小问题的范围,这就是我所在的地方:

  1. 创建一个XPage并添加自定义控件 - 它可以正常工作
  2. 创建一个带有移动前缀的XPage,其中包含单页应用控件和单个应用页面。将自定义控件添加到应用页面 - 它不起作用....
  3. 当我查看两者的来源时,第一个包含一些客户端JS来运行onClientLoad。对于移动页面,情况似乎并非如此......: - /

    关于如何解决这个问题的任何想法?

    使用解决方案进行更新: 如果其他人在这种情况下结束,我已经编辑了我的问题,以包含appPage和代码工作(以及ccGoogleMaps代码注释掉)。这应该引导你走向正确的方向 - 甚至可能提出更好的解决方案; - )

    >       <xe:appPage id="appPage4" pageName="map" resetContent="true">
    >           <xe:djxmHeading id="djxmHeading3" label="">
    >               <xe:this.back><![CDATA[<<]]></xe:this.back>
    >               <xe:this.moveTo><![CDATA[#{javascript:"place&documentId=" + viewScope.currentPlaceUnid +
    > "&action=openDocument"}]]></xe:this.moveTo>           </xe:djxmHeading>
    >           <xp:panel styleClass="container">
    >               <xp:this.data>
    >                   <xp:dominoDocument var="document1" formName="Place" action="openDocument"
    >                       documentId="#{javascript:viewScope.currentPlaceUnid}">
    >                       <xp:this.postOpenDocument><![CDATA[#{javascript:var v:java.util.Vector = document1.getItemValue("Address"); var addr = "";
    > for(var i=0; i<v.size(); i++) {   if(i>0) addr += ","     addr +=
    > v.elementAt(i) } viewScope.address =
    > addr;}]]></xp:this.postOpenDocument>
    >                   </xp:dominoDocument>
    >               </xp:this.data>
    >               <div id="div1"></div> <!--              <xc:ccGoogleMaps map_height="400" map_width="320" map_width_measurement="px" map_height_measurement="px"
    >                   map_zoom="10" map_type="ROADMAP" map_center_type="Address" map_center_address="#{javascript:viewScope.address}">
    >                   <xc:this.marker>
    >                       <xc:marker location_type="Address" animation="DROP"
    >                           location_address="#{javascript:viewScope.address}">
    >                           <xc:this.infotext><![CDATA[#{javascript:var info = "<b>" + document1.getItemValueString("Name") + "</b></br/>";
    >                               var v:java.util.Vector = document1.getItemValue("Address");
    >                               for(var i=0; i<v.size(); i++) {
    >                               if(i>0) info += "<br/>"
    >                               info += v.elementAt(i)
    >                               }
    >                               return info;}]]></xc:this.infotext>
    >                           <xc:this.title><![CDATA[#{javascript:document1.getItemValueString("Name")}]]></xc:this.title>
    >                       </xc:marker>
    >                   </xc:this.marker>
    >               </xc:ccGoogleMaps>  -->         <div id="map_canvas" style="width:320px; height:400px">             </div>          <xp:scriptBlock id="scriptBlock1">
    >               <xp:this.value><![CDATA[var geocoder; // 2013.11.01/Jda - Need to use code directly here instead of from Custom Control - and add
    > require at the bottom... function initialize(){
    > 
    >   geocoder = new google.maps.Geocoder();      var myOptions = {
    >       zoom: 10,
    >       mapTypeId: google.maps.MapTypeId.ROADMAP
    >     };
    >     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);      var mapcentertype = "Address";      if(mapcentertype ==
    > "Coordinates"){
    >       var map_center_latitude = document.getElementById("#{id:hdnMapCenterLatitude}").value;
    >       var map_center_longitude = document.getElementById("#{id:hdnMapCenterLongitude}").value;
    >       centerMap = new
    > google.maps.LatLng(parseFloat(map_center_latitude),parseFloat(map_center_longitude));
    >       map.setCenter(centerMap);   }else if(mapcentertype == "Address"){
    >       var address = "#{javascript:viewScope.address}";    
    >       geocoder.geocode( {'address': address}, function(results, status) { 
    >       if(status == google.maps.GeocoderStatus.OK){
    >           map.setCenter(results[0].geometry.location);
    >       }else{
    >           alert("Geocode center was not successful for the following reason: " + status + " -> " + address);      };  });     }else{      alert("You
    > forgot to set the property map_center_type.");    }       codeAddress();       
    > }
    > 
    > function codeAddress(){   var valueTitle =
    > '#{javascript:document1.getItemValueString("Name")}';     var valueLayer
    > = 0;  var valueInfotext = '#{javascript:var info = "<b>" + document1.getItemValueString("Name") + "</b></br/>";
    >                               var v:java.util.Vector = document1.getItemValue("Address");
    >                               for(var i=0; i<v.size(); i++) {
    >                               if(i>0) info += "<br/>"
    >                               info += v.elementAt(i)
    >                               }
    >                               return info;}';     var valueIcon = '';     var valueAddress = "#{javascript:viewScope.address}";   var valueAnimation = "DROP";        var
    > valueLocation_type = "Address";   var valueLocation_longitude = 0.0;
    >   var valueLocation_latitude = 0.0;       showMap(valueAddress,
    > valueAnimation, valueLayer, valueIcon, valueInfotext, valueTitle,
    > valueLocation_type, valueLocation_longitude,
    > valueLocation_latitude);       }
    > 
    > function showMap(address, marker_animation, marker_zindex,
    > marker_icon, marker_infowindow_text, marker_title,
    > marker_location_type, marker_location_longitude,
    > marker_location_latitude) {   // Create Marker
    >     var marker = new google.maps.Marker({map: map});  if(marker_location_type=="Coordinates"){
    >       var myLatLng = new google.maps.LatLng(parseFloat(marker_location_latitude),
    > parseFloat(marker_location_longitude));
    >       marker.setPosition(myLatLng);
    >     }else{        geocoder.geocode( {'address': address}, function(results, status){
    >           if (status == google.maps.GeocoderStatus.OK) {    
    >               marker.setPosition(results[0].geometry.location); 
    >           } else {
    >               alert("Geocode was not successful for the following reason: " + status + " -> " + address);
    >           }            
    >     });    
    >     }    
    >     
    >     // Set the title of the marker
    >     if(marker_title != ""){
    >        marker.setTitle(marker_title);
    >     };
    >     // Set the icon of the marker
    >     if(marker_icon != ""){
    >        marker.setIcon(marker_icon.replace("/",""));
    >     };    // Set the z-index of the marker    if(marker_zindex != ""){        marker.setZIndex(parseInt(marker_zindex));  };  // Set the animation
    > of the marker     if(marker_animation != ""){        
    >       if(marker_animation == "BOUNCE"){
    >           marker.setAnimation(google.maps.Animation.BOUNCE);      }else
    > if(marker_animation == "DROP"){
    >           marker.setAnimation(google.maps.Animation.DROP);        }else{          //
    > does not exist        };              };          // Set the infowindow and
    > text of the marker    console.log("marker_infowindow_text=" +
    > marker_infowindow_text);  if(marker_infowindow_text != ""){       var
    > infowindow = new google.maps.InfoWindow({content:
    > marker_infowindow_text});             google.maps.event.addListener(marker,
    > 'click', function() {             infowindow.open(map,marker);    });     };     }
    > 
    > function showCircle(center_type, center_address, center_latitude,
    > center_longitude, radius, fillColor, fillOpacity, strokeColor,
    > strokeOpacity, strokeWeight, visible, zIndex) {
    > 
    >       if(visible == "false"){         visible = false;    }else{      visible =
    > true;     };  //Create Circle     var circle_options = {      map: map,
    >       //center: center,       radius: parseInt(radius),       fillColor:
    > fillColor.toString(),         fillOpacity: fillOpacity,       strokeColor:
    > strokeColor.toString(),       strokeOpacity: strokeOpacity,
    >           strokeWeight: strokeWeight,
    >           visible: visible,
    >           zIndex: zIndex              };      var circle = new google.maps.Circle(circle_options);    if(center_type ==
    > "Coordinates"){       circle.setCenter(new
    > google.maps.LatLng(parseFloat(center_latitude),
    > parseFloat(center_longitude)));   }else{      geocoder.geocode(
    > {'address': center_address}, function(results, status) {
    >               if (status == google.maps.GeocoderStatus.OK) {
    >               circle.setCenter(results[0].geometry.location);     
    >               } else {
    >                   alert("Geocode of the circle was not successful for the following reason: " + status + " -> " + address);
    >               }       });
    > 
    >   };   }
    > 
    > require(["dojo/domReady"], function(){     initialize(); });
    > ]]></xp:this.value>           </xp:scriptBlock>           </xp:panel>
    >       </xe:appPage>
    

    我道歉,我必须使用“blockquote”和“Code sample”的组合来使XPage和JS看起来合理......

1 个答案:

答案 0 :(得分:1)

可能有一些dojo引用,而且在9中有一个amd loader会让生活变得更难。 尝试将你放在客户端加载代码中。

 require(["dojo/domReady!"], function(){
  // place code here


});