0

我们可以在sencha touch的Tabpanel项目中使用谷歌地图吗..我正在尝试这个.. 

          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

只需将 script 标签添加到您的 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 回答