2

私は解決策を探すためにフォーラムを通過し、遭遇したいくつかの問題にコードを適合させましたが、これは私にはわかりません。マップ上に複数のポイントをプロットして（これは機能します）、ポイント間に線を引こうとしています。各マーカーには、緯度や経度などの情報と、その隣接マーカー（線を引きたいポイント）が含まれています。また、さまざまな「ルート」がさまざまな色になる可能性があるため、線に必要な色を付けます。問題があることがわかるのは、線を引いて地図上に設定し、次のマーカーのためにループを再度実行することだけです。

私のコードはマーカーを配置し、各マーカーの情報ウィンドウを配置しますが、マーカー間に線を引きません。誰かが私が失敗した場所を見ることができますか、またはこれが私がそれをしている方法でそれを行うことが可能であるとしても？

drawMap関数を分離している理由は、ユーザーが表示されているデータをフィルターで除外したい場合に備えて、マップを動的に再描画する必要があるためです。そのため、関数が終了した後でも参照できるように、マーカーリストをグローバルに保持しています。

私のコード：

http://www.nku.edu/~sweikatam1/nkuPhysicalMapTest.html

特に問題のあるスポットは、オブジェクトの配列、markerList、緯度、経度、色（ポリラインの場合）、およびその他のデータビットを含む関数drawMapです。行の配置：

        for(var j = 0; j < markerList.length; j++){
            if(markerList[j].name == markerList[i].neighbor){
                var targetDestination = new google.maps.LatLng(markerList[j].latitude,markerList[j].longitude);
                //alert(markerList[i].latitude + " " + markerList[i].longitude + " \r" + markerList[j].latitude + " " + markerList[j].longitude);
            }
        }
        //set the pathway for the two points
        var flightPlanCoordinates = [
            new google.maps.LatLng(markerList[i].latitude, markerList[i].longitude),
            new google.maps.LatLng(targetDestination)
            ];

            //alert("Color: " + markerList[i].routeColor);
        //set the line and color    
        var flightPath = new google.maps.Polyline({
            path:flightPlanCoordinates,
            strokeColor:markerList[i].routeColor,
            strokeOpacity:2,
            strokeWeight:5
            });
        //apply lines
        flightPath.setMap(map);

全体としての機能：

    function drawMap(markerList){
    //alert("Starting drawMap");


    //create the map
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(39.032253, -84.465015),
      mapTypeId: google.maps.MapTypeId.HYBRID
    });


    var marker; 
    for (var i = 0; i <markerList.length; i++){
        /*alert("markerList @ i: " + markerList[i].name);
        alert("Marker Data: " + "Name: " + markerList[i].name + "\r "
                            + "Latitude: " + markerList[i].latitude + "\r "
                            + "Longitude: " + markerList[i].longitude + "\r "
                            + "Content Type: " + markerList[i].contentType + "\r "
                            + "Image: " + markerList[i].image
                            + "Color: " + markerList[i].routeColor);*/
        var contentData = '<b>'+markerList[i].name +'</b>: '
                            + markerList[i].latitude + ' x ' 
                            + markerList[i].longitude + '<br/><p>'
                            + markerList[i].contentType 
                            +'</p><img src="' + markerList[i].image + " height=150 width=100>";

        //create the marker

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(markerList[i].latitude,markerList[i].longitude),
            draggable: false,
            icon: markerList[i].icon,
            map:map,
            content: contentData,
            title:markerList[i].name
        });

        //find the neighbor for the current marker and set the destination coordinates
        for(var j = 0; j < markerList.length; j++){
            if(markerList[j].name == markerList[i].neighbor){
                var targetDestination = new google.maps.LatLng(markerList[j].latitude,markerList[j].longitude);
                //alert(markerList[i].latitude + " " + markerList[i].longitude + " \r" + markerList[j].latitude + " " + markerList[j].longitude);
            }
        }
        //set the pathway for the two points
        var flightPlanCoordinates = [
            new google.maps.LatLng(markerList[i].latitude, markerList[i].longitude),
            new google.maps.LatLng(targetDestination)
            ];

            //alert("Color: " + markerList[i].routeColor);
        //set the line and color    
        var flightPath = new google.maps.Polyline({
            path:flightPlanCoordinates,
            strokeColor:markerList[i].routeColor,
            strokeOpacity:2,
            strokeWeight:5
            });
        //apply lines
        flightPath.setMap(map);

        //handle open information windows
        google.maps.event.addListener(marker,'click', function(){
            closeInfos();
            var info = new google.maps.InfoWindow({content: this.content});
            info.open(map,this);
            infos[0]=info;
            });
            //alert("Marker " + markerList[i].name + " placed.");


    }
    //alert("drawMap complete. Drawing lines");

    <!-- DRAWING LINES COMPLETE -->
}

ここで何か奇妙、混乱、または説明が必要な場合は、お知らせください。批判や物事をより良くする方法はいつでも歓迎です。みんなありがとう！

4

1 に答える 1

1

を定義する際にflightPlanCoordinates、2番目のLatLngは別のLatLng（targetDestination）から作成されていました。したがって、そのnew google.maps.LatLng部分を削除して、targetDestinationを直接使用してください。この変更により、地図上に青いジグザグと赤いジグザグが描かれているのが見えました。

var flightPlanCoordinates = [
    new google.maps.LatLng(markerList[i].latitude, markerList[i].longitude),
    targetDestination
];
于 2012-05-29T16:43:26.763 に答える