google-maps - 9.0 へのアップグレード後、Google マップのカスタムコントロールがモバイル xpage で機能しない

Question

モバイル XPages アプリケーションでGoogle マップカスタムコントロール ( http://www.openntf.org/catalogs/a2cat.nsf/topicThread.xsp?action=openDocument&documentId=068D8F976D87B29E852578B200259707 ) を使用しています。これは 8.5.3 では機能していましたが、サーバーを 9.0 にアップグレードすると機能しなくなりました。

私は今、問題を絞り込もうとしましたが、これが私がいる場所です:

単一の XPage を作成し、カスタムコントロールを追加します - 動作します
1 つのページアプリコントロールと 1 つのアプリページを含む mobile プレフィックスを使用して、1 つの XPage を作成します。カスタムコントロールをアプリページに追加しますが、機能しません....

2 つのソースを見ると、最初のソースには onClientLoad を実行するクライアント側の JS が含まれています。モバイルページの場合、これは当てはまらないようです... :-/

これを解決する方法についてのアイデアはありますか?

解決策の更新: 他の誰かがこの状況に陥った場合は、質問を編集して、コードが機能する 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>

XPage と JS を合理的に見せるために、「blockquote」と「Code sample」を組み合わせて使用しなければならなかったことをお詫びします...

score 1 · Accepted Answer

おそらく道場の参照がいくつかあり、9には、人生を難しくするamdローダーがあります。この中にクライアントロードコードを配置してみてください。

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


});

google-maps - 9.0 へのアップグレード後、Google マップのカスタム コントロールがモバイル xpage で機能しない

1 に答える 1

Related

Reference

google-maps - 9.0 へのアップグレード後、Google マップのカスタムコントロールがモバイル xpage で機能しない