如何使用標記和折線顯示Google地圖？

Question

我可以創建一個顯示多段線和可以顯示標記的地圖的地圖，但我無法讓它們顯示在一張地圖上。我需要一個帶有兩條不同彩色多段線的基本地圖，以及多段線上顯示的自定義標記。

HTML中的任何示例適合我？

安德烈

Answer 1

我終於征服了這個問題，並得到了有效的解決方案。

function initialize() { 
    if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map_canvas")); 
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GMapTypeControl()); 
    map.setCenter(new GLatLng(-25.935, 28.17), 10); 

    // Add markers to the map 

    // Define Icons 
    var baseIcon = new GIcon(); 
    baseIcon.iconSize=new GSize(32,32); 
    baseIcon.shadowSize=new GSize(56,32); 
    baseIcon.iconAnchor=new GPoint(16,16); 
    baseIcon.infoWindowAnchor=new GPoint(16,0); 
    var station = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon57.png", null, "http://maps.google.com/mapfiles/kml/pal4/icon57s.png"); 
    var plane = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal2/icon56.png", null, "http://maps.google.com/mapfiles/kml/pal2/icon56s.png"); 

    function createMarker(point,html,icon) { 
     var marker = new GMarker(point,icon); 
     GEvent.addListener(marker, "click", function() { 
     marker.openInfoWindowHtml(html); 
     }); 
    return marker; 
    } 

    // OR Tambo 
    var point = new GLatLng(-26.131774, 28.231645); 
    var marker = createMarker(point,'<div id="infoBox"><a href="http://www.gautrainschedule.co.za/station.php?sid=5&action=custom">OR Tambo<\/a> is located inside OR Tambo International Airport<\/div>', station) 
    map.addOverlay(marker); 


    // Rhodesfield 
    var point = new GLatLng(-26.126582, 28.225250); 
    var marker = createMarker(point,'<div id="infoBox"><a href="http://www.gautrainschedule.co.za/station.php?sid=6&action=custom">Rhodesfield Station<\/a> services Kempton Park area, excluding OR Tambo International airport.<\/div>', station) 
    map.addOverlay(marker); 

    // Marlboro 
    var point = new GLatLng(-26.084702, 28.105270); 
    var marker = createMarker(point,'<div id="infoBox"><a href="http://www.gautrainschedule.co.za/station.php?sid=7&action=custom">Marlboro Station<\/a> is located close to the N3 highway<\/div>', station) 
    map.addOverlay(marker); 

    // Sandton 
    var point = new GLatLng(-26.107855, 28.058138); 
    var marker = createMarker(point,'<div id="infoBox"><a href="http://www.gautrainschedule.co.za/station.php?sid=8&action=custom">Sandton Station<\/a> is located close to major shopping center and other major corporations.<\/div>', station) 
    map.addOverlay(marker); 


    // Draw East West Route 
    var polyline = new GPolyline([ 
    new GLatLng(-26.107855, 28.058138), 
    new GLatLng(-26.084702, 28.105270), 
    new GLatLng(-26.126582, 28.225250), 
    new GLatLng(-26.131774, 28.231645) 
    ], "#00ff00",8); 
    map.addOverlay(polyline); 

    } 
} 

</script> 

，並顯示在地圖上使用以下HTML：

<div id="map_canvas" style="width: 290px; height: 350px"></div> 

Answer 2

private void setUpMap() { 

     // Instantiates a new Polyline object and adds points to define a rectangle 
     PolylineOptions rectOptions = new PolylineOptions() 
       .add(new LatLng(13.058375, 80.236052)) 
       .add(new LatLng(13.058792, 80.235837)) // North of the previous point, but at the same longitude 
       .add(new LatLng(13.059225, 80.235818)) // Same latitude, and 30km to the west 
       .add(new LatLng(13.059973, 80.235799)) // Same longitude, and 16km to the south 
       .add(new LatLng(13.060984, 80.235759)) 
       .add(new LatLng(13.061232, 80.235743)) 
       .add(new LatLng(13.061331, 80.235713)) 
       .add(new LatLng(13.061418, 80.235665)) 
       .add(new LatLng(13.061470, 80.235528)) 
       .add(new LatLng(13.061514, 80.235144)) 
       .add(new LatLng(13.061679, 80.234702)) 
       .add(new LatLng(13.062787, 80.234672)) 
       .add(new LatLng(13.062747, 80.233774)) 
       .add(new LatLng(13.062755, 80.233600)) 
       .add(new LatLng(13.062591, 80.233549)) 
       .add(new LatLng(13.062473, 80.233519)) 
       .width(25) 
       .color(Color.BLUE) 
       .geodesic(true); // Closes the polyline. 

// Get back the mutable Polyline 
     Polyline polyline = mMap.addPolyline(rectOptions); 

     mMap.addMarker(new MarkerOptions().position(new LatLng(13.058375, 80.236052)).title("Hostel").icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))); 
     mMap.addMarker(new MarkerOptions().position(new LatLng(13.062451, 80.233247)).title("Bertram Hall").icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))); 
     mMap.addMarker(new MarkerOptions().position(new LatLng(13.061299, 80.234671)).title("Church").icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))); 

    } 
    } 

這是我使用的折線和標記代碼，併爲我工作得很好。根據你的需要改變緯度值。