如何使用标记和折线显示谷歌地图？

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)));

    }
     }

这是我使用的折线和标记代码，对我来说效果很好。根据您的需要更改 latlng 值。