2010-12-27 8 views
0

Ich möchte eine Google-Karte (mit Straßenansicht) auf meiner Website hinzufügen. Ich benutze diesen Code. Wenn ich auf den Punkt auf der Karte geklickt habe, kann die Straßenansicht in diesen Teil geändert und die Klickpunktinformationen angezeigt werden. Aber wie fügt man einen roten Ballonsmarker in den Klickpunkt ein? Dann klicke ich in den anderen Punkt, der erste rote Ballons-Marker wird zum neuen Punkt bewegt (klicke einfach, um den Marker zu bewegen, ziehe den Marker nicht). Vielen Dank.Wie füge ich einen roten Ballons Marker in dieser Google Map API hinzu?

<!-- 
You are free to copy and use this sample in accordance with the terms of the 
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) 
--> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google Maps API Sample</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script> 
    <script type="text/javascript"> 

    var map; 
    var myPano; 
    var panoClient; 
    var nextPanoId; 

    function initialize() { 
     var fenwayPark = new GLatLng(42.345573,-71.098326); 
     var fenwayPOV = {yaw:370.64659986187695,pitch:-20}; 

     panoClient = new GStreetviewClient();  

     map = new GMap2(document.getElementById("map_canvas")); 
     map.setCenter(fenwayPark, 15); 
     GEvent.addListener(map, "click", function(overlay,latlng) { 
     panoClient.getNearestPanorama(latlng, showPanoData); 
     }); 

     myPano = new GStreetviewPanorama(document.getElementById("pano")); 
     myPano.setLocationAndPOV(fenwayPark, fenwayPOV); 
     GEvent.addListener(myPano, "error", handleNoFlash); 
     panoClient.getNearestPanorama(fenwayPark, showPanoData); 
    } 

    function showPanoData(panoData) { 
     if (panoData.code != 200) { 
     GLog.write('showPanoData: Server rejected with code: ' + panoData.code); 
     return; 
     } 
     nextPanoId = panoData.links[0].panoId; 
     var displayString = [ 
     "Panorama ID: " + panoData.location.panoId, 
     "LatLng: " + panoData.location.latlng, 
     "Copyright: " + panoData.copyright, 
     "Description: " + panoData.location.description, 
     "Next Pano ID: " + panoData.links[0].panoId 
     ].join("<br/>"); 
     map.openInfoWindowHtml(panoData.location.latlng, displayString); 

     GLog.write('Viewer moved to' + panoData.location.latlng); 
     myPano.setLocationAndPOV(panoData.location.latlng); 
    } 

    function next() { 
     // Get the next panoId 
     // Note that this is not sophisticated. At the end of the block, it will get stuck 
     panoClient.getPanoramaById(nextPanoId, showPanoData); 
    } 

    function handleNoFlash(errorCode) { 
     if (errorCode == 603) { 
     alert("Error: Flash doesn't appear to be supported by your browser"); 
     return; 
     } 
    } 

    </script> 
    </head> 
    <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;"> 
    <div id="map_canvas" style="width: 500px; height: 400px"></div> 
    <div name="pano" id="pano" style="width: 500px; height: 300px"></div> 
    <input type="button" onclick="next()" value="Next"/> 
    </body> 
</html> 

Antwort

Verwandte Themen