0

senchatouchのTabpanelアイテムでGoogleマップを使用できますか..これを試しています.. 

          title:'Map',
          items:[              
                 {
                   xtype:'map',
                   useCurrentLocation:true,
                 },

参照を追加しました..

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>

この感謝の扱い方を事前に教えてください。

4

2 に答える 2

1

はい。APIドキュメントを参照してください：http：//docs.sencha.com/touch/2-1/#！/api/Ext.Map

スクリプトタグをindex.htmlページに追加し、表示されたコードを使用してコンポーネントを追加するだけです。

于 2012-11-21T11:06:35.253 に答える
-1 
    <style type="text/css">
           .tabGroup {
        font: 10pt arial, verdana;
        width: auto;
        height: auto;
    }

    /* Configure the radio buttons to hide off screen */
    .tabGroup > input[type="radio"] {
        position: absolute;
        left:-100px;
        top:-100px;
    }

    /* Configure labels to look like tabs */
    .tabGroup > input[type="radio"] + label {
        /* inline-block such that the label can be given dimensions */
        display: inline-block;

        /* A nice curved border around the tab */
        border: 1px solid #ddd;
        border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;

        /* the bottom border is handled by the tab content div */
        border-bottom: 0;

        /* Padding around tab text */
        padding: 5px 10px;

        /* Set the background color to default gray (non-selected tab) */
        background-color:#ddd;
    }

    /* Focused tabs need to be highlighted as such */
    .tabGroup > input[type="radio"]:focus + label {
        border:1px solid #ddd;
    }

    /* Checked tabs must be white with the bottom border removed */
    .tabGroup > input[type="radio"]:checked + label {
        background-color:white;
        font-weight: bold;
        border-bottom: 1px solid white;
        margin-bottom: -1px;
    }

    /* The tab content must fill the widgets size and have a nice border */
    .tabGroup > div {
        display: none;
        height: 100%;
    }

    /* This matchs tabs displaying to thier associated radio inputs */
    .tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 {
        display: block;
    }

       </style>

   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
       <script>
          var directionDisplay;
          var directionsService = new google.maps.DirectionsService();
          var map;
          var marker;

          function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var directionend = new google.maps.LatLng(51.68830303062416, 5.312845717288155);

            var mapOptions = {
              zoom:15,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: directionend
            }


            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        marker = new google.maps.Marker({
              map:map,
              draggable:true,
              animation: google.maps.Animation.DROP,
              position: directionend
            });

            directionsDisplay.setMap(map);
          }

          function calcRoute() {
            var start = document.getElementById('direction-from').value;
            var end = document.getElementById('direction-end').value;
            var request = {
                origin:start,
                destination:end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsService.route(request, function(response, status) {
              if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
              }
            });
          }
        </script>

    <div class="tabGroup">
        <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/>
        <label for="rad1">Image Gallery</label>

        <input type="radio" name="tabGroup1" id="rad2" class="tab2" onclick="initialize()"/>
        <label for="rad2">Location Map</label>

        <div class="tab1">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="tab2">
        <div id="map-canvas" style="width: 100%; height: 450px;"><p style="text-align:center; margin-top:50px;">Loading..</p></div>
        <input type="hidden" name="direction_end" id="direction-end" value="Bangalore">
        <input type="text" name="direction_from" id="direction-from">
        <button id="get-direction" onclick="calcRoute()">Get Direction</button>
        </div>
    </div>
    **<input type="radio" name="tabGroup1" id="rad2" class="tab2" onclick="initialize()"/>** this is very important line.thanks..
于 2013-03-19T11:05:05.247 に答える