ポリラインを表示するマップとマーカーを表示できるマップを作成できますが、1つのマップに表示させることはできません。2つの異なる色のポリラインと、ポリラインの上に表示されるカスタムマーカーを含む基本的なマップが必要です。
HTMLの例はありますか?
アンドレ
ポリラインを表示するマップとマーカーを表示できるマップを作成できますが、1つのマップに表示させることはできません。2つの異なる色のポリラインと、ポリラインの上に表示されるカスタムマーカーを含む基本的なマップが必要です。
HTMLの例はありますか?
アンドレ
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)));
}
}
これは私が使用したポリラインとマーカーのコードで、私にとってはうまくいきました。必要に応じて緯度の値を変更します。
私はついに問題を克服し、実用的な解決策を得ました。
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>