如何使用标记和折线显示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))); 

    } 
    } 

这是我使用的折线和标记代码，并为我工作得很好。根据你的需要改变纬度值。