Google maps 如何使用标记和多段线显示Google地图？

我可以创建一个显示多段线的地图和一个可以显示标记的地图，但我无法让它们显示在一个地图上。我需要一个基本的地图与两个不同颜色的多段线和自定义标记显示在多段线

有HTML的例子吗

---

安德烈

我终于克服了这个问题，找到了一个有效的解决办法

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>

函数初始化（）{
if（GBrowserIsCompatible（））{
var map=newgmap2（document.getElementById（“map_canvas”）；
addControl（新的GlargeMappControl（））；
addControl（新的GMapTypeControl（））；
地图设定中心（新格拉特林（-25.935,28.17），10）；
//向地图添加标记
//定义图标
var baseIcon=new GIcon（）；
baseIcon.iconSize=新的GSize（32,32）；
baseIcon.shadowSize=新的GSize（56,32）；
baseIcon.iconAnchor=新的GPoint（16,16）；
baseIcon.infoWindowAnchor=新的GPoint（16,0）；
var站=新GIcon（基本图标，“http://maps.google.com/mapfiles/kml/pal4/icon57.png，空http://maps.google.com/mapfiles/kml/pal4/icon57s.png");
var平面=新GIcon（基本图标，“http://maps.google.com/mapfiles/kml/pal2/icon56.png，空http://maps.google.com/mapfiles/kml/pal2/icon56s.png");
函数createMarker（点、html、图标）{
var标记=新的GMarker（点、图标）；
addListener（标记“单击”，函数（）{
marker.openInfoWindowHtml（html）；
});
返回标记；
}
//还是坦博
var点=新玻璃（-26.131774,28.231645）；
var marker=createMarker（点，'或Tambo位于或Tambo国际机场'，车站内）
添加覆盖图（标记）；
//罗德斯菲尔德
var点=新玻璃（-26.126582,28.225250）；
var marker=createMarker（点，“罗德斯菲尔德车站服务肯普顿公园区，不包括或坦博国际机场”，车站）
添加覆盖图（标记）；
//万宝路
var点=新玻璃（-26.084702,28.105270）；
var marker=createMarker（点，“万宝路车站位于N3公路附近”，车站）
添加覆盖图（标记）；
//桑顿
var点=新玻璃（-26.107855,28.058138）；
var marker=createMarker（点，'Sandton Station位于大型购物中心和其他大型公司附近'，Station）
添加覆盖图（标记）；
//画东西线
var polyline=新的GPolyline([
新玻璃（-26.107855,28.058138），
新玻璃（-26.084702,28.105270），
新玻璃（-26.126582,28.225250），
新玻璃（-26.131774,28.231645）
]“#00ff00”，8）；
map.addOverlay（多段线）；
}
}

要显示地图，请使用以下html：

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

---

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

尝试在同一地图上同时显示多段线和标记时会遇到什么问题。请告诉我们，这样我们就可以帮忙了！这不应该是个问题。标记和多段线是不同的。我在网上找到的示例中没有一个使用基本代码在一张地图上同时显示标记和多段线。有一些可以读取XML或JSON文件，但我需要一个基本文件。Google代码示例使用一个函数创建随机点，但没有显示如何仅粘贴几个点。

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

    }
     }