こんにちは、私は Google マップを持っており、座標は解析 XML データを介して取得されます。このスクリプトは、Google マップの V3 を使用している econym のサイトに基づいています。これで、マーカーを正しく表示できましたが、ポリラインは単一の線ではなく、あるマーカーから別のマーカーに線を引くため、発生しないはずの多角形のように見えます。
<script type="text/javascript">
var select_html = "";
var gmarkers = [];
var map = null;
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
gmarkers.push(marker);
return marker;
}
//function createPolyline
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(<?php echo $row['latitude']?>, <?php echo $row['longitude']?>),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from 100.xml
downloadUrl("phpsqlajax_genxml.php?id=<?= $_GET['lgid']?>", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
var path = [];
for (var i = 0; i < markers.length; ++i) {
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
var marker = createMarker(point,label,html);
path.push(marker.position);
}
var polyline = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000"
});
polyline.setMap(map);
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
見てみませんか?ありがとう!