Google maps TabPanel中的谷歌地图

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

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

我加了一份推荐信

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

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

请让我知道如何处理这件事

---

提前谢谢

是的。请参阅API文档：

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

只需将脚本标记添加到index.html页面，然后使用显示的代码添加组件。

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

    <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..

tabGroup先生{
字体：10pt arial，verdana；
宽度：自动；
高度：自动；
}
/*配置单选按钮以隐藏屏幕外*/
.tabGroup>input[type=“radio”]{
位置：绝对位置；
左：-100px；
顶部：-100px；
}
/*将标签配置为类似于选项卡*/
.tabGroup>input[type=“radio”]+标签{
/*内联块，以便可以为标签指定尺寸*/
显示：内联块；
/*标签周围有一个漂亮的弧形边框*/
边框：1px实心#ddd；
边界半径：5px5px0；
-moz边界半径：5px5px0；
-webkit边界半径：5px 5px 0；
/*底部边框由选项卡内容div处理*/
边界底部：0；
/*在选项卡文本周围填充*/
填充物：5px10px；
/*将背景色设置为默认灰色（非选定选项卡）*/
背景色：#ddd；
}
/*重点选项卡需要突出显示*/
.tabGroup>input[type=“radio”]：焦点+标签{
边框：1px实心#ddd；
}
/*选中的选项卡必须为白色，且底部边框已移除*/
.tabGroup>input[type=“radio”]：选中+标签{
背景色：白色；
字体大小：粗体；
边框底部：1px纯白；
边缘底部：-1px；
}
/*选项卡内容必须填充小部件的大小，并且有一个漂亮的边框*/
.tabGroup>div{
显示：无；
身高：100%；
}
/*这将选项卡显示与相关的无线电输入相匹配*/
.tab1:选中~.tab1、.tab2:选中~.tab2、.tab3:选中~.tab3{
显示：块；
}
方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
var标记；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var directionend=new google.maps.LatLng（51.68830303062416,5.31284571728155）；
变量映射选项={
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：directionend
}
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
marker=新的google.maps.marker({
地图：地图，
真的，
动画：google.maps.animation.DROP，
职位：directionend
});
方向显示.setMap（地图）；
}
函数calcRoute（）{
var start=document.getElementById（'direction-from'）。值；
var end=document.getElementById（'direction-end'）。值；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}
图像库
位置图
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本

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

加载

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

了解方向
****这是一条非常重要的线路，谢谢。。

我已经添加了这个，看看上面我已经提到了这个，那么你有什么问题？您没有说什么不对。当我单击“确定”时，会显示使用当前位置的警告，提示需要Google map API。听起来好像没有加载链接到Google Maps API的

标记。确保它在其他所有内容之前，并且URL有效。现在我发现错误是..成功回调中的错误：Geolocation9=ReferenceError:找不到变量：google