Карта Google в TabPanel

117
13

Можем ли мы использовать карту Google в элементе Tabpanel при нажатии sencha.. Я пробую это.

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

Я добавил ссылку..

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

Пожалуйста, дайте мне знать, как справиться с этим Спасибо заранее.

спросил(а) 2021-01-27T20:01:27+03:00 4 месяца, 4 недели назад
1
Решение
63

Да. Пожалуйста, обратитесь к документации по API: http://docs.sencha.com/touch/2-1/#!/api/Ext.Map

Просто добавьте тег сценария на страницу index.html, а затем добавьте свой компонент с помощью кода, который вы указали.

ответил(а) 2021-01-27T20:01:27+03:00 4 месяца, 4 недели назад
-4

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

ответил(а) 2021-01-27T20:01:27+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема