Hallo zusammen, sorry aber ich finde keine richtige Formulierung für das Thema.
Ich habe mir da was schönes fertiges besorgt, siehe unter: Link
Da ich so begeister davon bin, möchte ich dies jetzt in eine ASP.NET Anwendung einbauen mit dem Ziel die Orte dynamisch aus einer Datenbank zu befüllen.
Und genau da ist mein Problem...
Das ganze basiert auf JQUERY und ich hab da erlich gesagt nicht viel Ahnung.
Und trotzdem möchte ich das Vorgenommene schaffen und verwirklichen.
Hier mal ein der JQUERY-Auschnitt um des es geht:
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict(); jQuery(document).ready(function(){
//MAP ZOOM (0 to 20)
var zoomLevel = 5,
gMap = jQuery("#gMap"),
//iPad,iPhone,iPod...
deviceAgent = navigator.userAgent.toLowerCase(),
iPadiPhone = deviceAgent.match(/(iphone|ipod|ipad)/);
//iPad Stuff
if (iPadiPhone) {
//ADD MAP CONTROLS AND POST ARROWS
jQuery("#footer").prepend('<div class="markerNav" title="Prev" id="prevMarker">‹</div><div id="markers"></div><div class="markerNav" title="Next" id="nextMarker">›</div><div id="mapTypeContainer"><div id="mapStyleContainer"><div id="mapStyle" class="satellite"></div></div><div id="mapType" title="Map Type" class="satellite"></div></div>');
} else {//IF NOT iPad
jQuery('#zoomIn').live('click',function(){
zoomLevel += 1;
gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
});
jQuery('#zoomOut').live('click',function(){
zoomLevel -= 1;
gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
});
//ADD MAP CONTROLS AND POST ARROWS
jQuery("#footer").prepend('<div class="markerNav" title="Prev" id="prevMarker">‹</div><div id="markers"></div><div class="markerNav" title="Next" id="nextMarker">›</div><div id="mapTypeContainer"><div id="mapStyleContainer"><div id="mapStyle" class="satellite"></div></div><div id="mapType" title="Map Type" class="satellite"></div></div><div class="zoomControl" title="Zoom Out" id="zoomOut"><img src="images/zoomOut.png" alt="-" /></div><div class="zoomControl" title="Zoom In" id="zoomIn"><img src="images/zoomIn.png" alt="+" /></div>');
}
jQuery('body').prepend("<div id='target'></div>");
gMap.gmap3({
action: 'init',
onces: {
bounds_changed: function(){
var number = 0;
jQuery(this).gmap3({
action:'getBounds',
callback: function (){
//ADD MARKERS HERE - FORMAT IS AS FOLLOWS...
//add(jQuery(this), number += 1, "NAME", "URL","ADDRESS1<br />ADDRESS2","LATITUDE","LONGITUDE", 'THUMBNAIL');
add(jQuery(this), number += 1, "Colosseum", "map_post.html","Via Sforza, 10<br />00184 Roma, Italy","41.890202","12.492228", '<img width="95" height="95" src="images/thumbs/colosseum.jpg" alt="" />');
add(jQuery(this), number += 1, "Iguazu Falls", "map_post.html","Iguazu Falls<br />Misiones, Argentina","-25.69506","-54.440432", '<img width="95" height="95" src="images/thumbs/iguazu.jpg" alt="" />');
add(jQuery(this), number += 1, "Great Barrier Reef", "map_post.html","Great Barrier Reef<br />Australia","-10.21053","142.159653", '<img width="95" height="95" src="images/thumbs/reef.jpg" alt="" />');
add(jQuery(this), number += 1, "Statue of Liberty", "map_post.html","Liberty Island<br />New York, NY 10004","40.69005","-74.045067", '<img width="95" height="95" src="images/thumbs/liberty.jpg" alt="" />');
add(jQuery(this), number += 1, "Chichen Itza", "map_post.html","Chichen Itza<br />Mexico","20.683341","-88.569009", '<img width="95" height="95" src="images/thumbs/itza.jpg" alt="" />');
add(jQuery(this), number += 1, "Taj Mahal", "map_post.html","Taj Mahal<br />Agra, India","27.174799","78.042111", '<img width="95" height="95" src="images/thumbs/taj.jpg" alt=""" />');
add(jQuery(this), number += 1, "Great Wall of China", "map_post.html","Great Wall of China<br />Beijing, China","40.429076","116.568219", '<img width="95" height="95" src="images/thumbs/wall.jpg" alt="" />');
add(jQuery(this), number += 1, "Stonehenge", "map_post.html","4 A344 Road<br />Wiltshire, Salisbury SP4 7DE, UK","51.178859","-1.82622", '<img width="95" height="95" src="images/thumbs/stone.jpg" alt=""" />');
add(jQuery(this), number += 1, "Great Pyramid of Giza", "map_post.html","Great Pyramid of Giza<br />Egypt","29.977316","31.132314", '<img width="95" height="95" src="images/thumbs/giza.jpg" alt="" />');
add(jQuery(this), number += 1, "Grand Canyon", "map_post.html","Grand Canyon<br />Williams, AZ","36.34313","-112.51339", '<img width="95" height="95" src="images/thumbs/canyon.jpg" alt="" />');
add(jQuery(this), number += 1, "Eiffel Tower", "map_post.html","Parc du Champ de Mars, 5 Ave Anatole France <br />75007 Paris, France","48.858588","2.293847", '<img width="95" height="95" src="images/thumbs/tower.jpg" alt="" />');
}
});
}
}
},{
action: 'setOptions', args:[{
zoom:zoomLevel,
scrollwheel:false,
disableDefaultUI:true,
disableDoubleClickZoom:true,
draggable:true,
mapTypeControl:false,
panControl:false,
scaleControl:false,
streetViewControl:false,
zoomControl:false,
//MAP TYPE: 'roadmap', 'satellite', 'hybrid'
mapTypeId:'roadmap'
}]
});
function add(jQuerythis, i, title, link, excerpt, lati, longi, img){
jQuerythis.gmap3({
action : 'addMarker',
lat:lati,
lng:longi,
//PIN MARKER IMAGE
options: {icon: new google.maps.MarkerImage('images/pin.png')},
events:{
mouseover: function(marker){
jQuerythis.css({cursor:'pointer'});
jQuery('#markerTitle'+i+'').fadeIn({ duration: 200, queue: false }).animate({bottom:"32px"},{duration:200,queue:false});
jQuery('.markerInfo').removeClass('activeInfo').hide();
jQuery('#markerInfo'+i+'').addClass('activeInfo').show();
jQuery('.marker').removeClass('activeMarker');
jQuery('#marker'+i+'').addClass('activeMarker');
},
mouseout: function(){
jQuerythis.css({cursor:'default'});
jQuery('#markerTitle'+i+'').stop(true,true).fadeOut(200,function(){jQuery(this).css({bottom:"0"})});
},
click: function(marker){window.location = link}
},
callback: function(marker){
var jQuerybutton = jQuery('<div id="marker'+i+'" class="marker"><div id="markerInfo'+i+'" class="markerInfo"><a href="'+link+'">'+img+'</a><h2><a href="'+link+'">'+title+'</a></h2><p>'+excerpt+'</p><a class="markerLink" href="'+link+'">Details anzeigen →</a><div class="markerTotal">'+i+' / <span></span></div></div></div>');
jQuerybutton.mouseover(function(){
jQuerythis.gmap3({
action:'panTo',
args:[marker.position]
});
jQuery("#target").stop(true,true).fadeIn(1200).delay(500).fadeOut(1200);
});
jQuery('#markers').append(jQuerybutton);
var numbers = jQuery(".markerInfo").length;
jQuery(".markerTotal span").html(numbers);
if(i == 1){
jQuery('.marker:first-child').addClass('activeMarker').mouseover();
}
jQuerythis.gmap3({
action:'addOverlay',
content: '<div id="markerTitle'+i+'" class="markerTitle">'+title+'</div>',
latLng: marker.getPosition()
});
}
});
}
});
//]]>
</script>
Genau gesagt möchte ich da irgendwie im Code behind dran kommen an den Code in der Mitte wo es heißt: //ADD MARKERS HERE - FORMAT IS AS FOLLOWS...
Sorry, aber wie gesagt kenn mich da echt nicht gut aus und wäre für jeden Tipp dankbar den ihr mir geben könntet damit ich irgendwie die Orde dynamisch aus einer Datenbank laden kann.
WebForms mag keine fest definierten Element-IDs; genau deswegen (und wegen vielen anderen Dingen) ist WebForms auch NICHT geeignet für RIA-Anwendungen. Es ist einfach nicht kompatibel zu anderen Frameworks wie jQuery oder RIA-Designs. Aber das predige ich hier sinnlos vor mir her - hab ich Dir glaube ich auch schon mehrfach gesagt; aber interessiert ja keinen.
Was Du hier tun musst: alle festen Elemente so umschreiben, dass Du eben nicht mit festen IDs arbeitest, sondern zB mit Klassen. Oder HTML5 Attributen (nur kann das WebForms eben nicht so toll).
Doof nur ist, dass WebForms irgendwelche Element-Injektionen, wie das hier eben umgesetzt wird, überhaupt nicht mag und oft auch nur - wenn überhaupt - mit irgendwelchen Tricks funktioniert. Man kann nicht so einfach den ViewState via Javascript oder eben jQuery manipulieren ohne, dass es ASP.NET WebForms stört.
Ob das alles so toll klappt bezweifel ich, da WebForms - wie so oft gesagt - nicht wirklich die passende Technologie für solch ein Vorhaben ist.
Auf alle Fälle ist das hier mal wieder ein perfektes Beispiel, dass WebForms eine ganz andere Zielgruppe hat als dieses Template.
- performance is a feature -
Microsoft MVP - @Website - @AzureStuttgart - github.com/BenjaminAbt - Sustainable Code
ok, gibts nicht irgenwie z.b. ne Möglichkeit den code im codebehind z.b. an ein literal oder so zu übergeben???
evtl. ne andere idee?
Klar kannst Du irgendwelches Script Zeugs nachträglich hinzuladen (jQuery Grundlagen, bitte selbst durch entsprechende Tutorials aneignen).
Und wie das dann nachher mit WebForms funktioniert; an die Informationen wirst Du bei der entsprechenden Grundlagenrecherche auch kommen.
Aber irgendwas an den ViewState injezieren um das nachher auszuwerten ist eben ein anderes Kapitel.
- performance is a feature -
Microsoft MVP - @Website - @AzureStuttgart - github.com/BenjaminAbt - Sustainable Code
Hallo FranzBeckenbauer
Du kannst auch den ganzen Javascript Text serverseitig generieren.
Schau Dir dazu mal "RegisterStartupScript" und "RegisterClientScriptBlock" an.
Beste Grüsse
Diräkt
Hallo zusammen,
hab jetzt mal getestet...
Im Codebehind im Pageload verwende ich den sleben Code und übergebe den an einen StringBuilder. Anschließend übergebe ich den StringBuilder an ein Literal. Das ergebnis funktioniert.
Danke euch noch mal.