1

私はクライアントのためにこのマップの作成に取り組んでいますが、少し頭がいっぱいです。これまでのところ、modx を使用してマップのマーカーのリストを動的に作成し、正常に機能するカスタム アイコンを作成し、希望どおりにスタイルを設定しました。ただし、次の点について少し助けを求めています。

カスタム アイコンが、希望する場所を正確に示していません。iconAnchor 変数がこれを制御していると思います。あれは正しいですか？アイコンのx / y座標だけの値ですか？また、情報ウィンドウの配置がどこで制御されているかも知りたいです。

リスト上の場所をクリックすると、マップはその場所を中心に表示されますが、その結果、情報ウィンドウがマップの下からはみ出してしまいます。マップの左上の象限にマーカー アイコンを表示する方法はありますか?

私の情報ウィンドウには、最終的に約 10 ～ 15 個の画像のリストが表示され、その横にテキストが表示されるので、情報ウィンドウをスクロールさせたいと思います。これは機能していますが、スクロールバーをクリックして下に移動すると、マウスを放すとすぐにスクロールが停止しますが、マップは保持されます。その結果、スクロール後、マップはねずみ。これを引き起こしている原因について何か考えはありますか？

私の最後の懸念は、ロード後にマップがポイントからポイントへとジャンプする方法です。それぞれの場所が一瞬表示された後、次の場所にジャンプします。この機能を削除して、すべてのマーカーを表示する開始マップ エリアを設定することはできますか?

あらゆるアドバイスをありがとう。

私のコードは次のものから改作されました: http://www.erikwhite.net/gmapjquery.html

これが私の現在のコードです：






            $(document).ready(function(){
                var defaultLat = 50.5;
                var defaultLon = -1.4;




//code to enable a customer marker on the map
var icon = new GIcon();
icon.image = '/img/icon.png';
icon.iconSize = new GSize (45, 48);
icon.iconAnchor = new GPoint (8, 42);
icon.infoWindowAnchor = new GPoint (43, 6);

//var markers = new GMarker(getLatLng();, icon);



                var markers = new Array();

    markers[0] = new Array(new GMarker(new GLatLng(LAT, LNG), icon), "TITLE", "title, blurb and a set of images paired with a line of text");


                var map = new google.maps.Map2($("#map").get(0));//Initialise google maps
                map.setCenter(new GLatLng(defaultLat, defaultLon), 15);//Set location to the default and zoom level
                map.disableDoubleClickZoom();//Disable zooming




                $.each(markers,function(i,marker){
                    var delayTime = ((i * 300) / (0.5 * markers.length));//Delay time decreases as number of markers increases

                    setTimeout(function(){ 
                        map.addOverlay(marker[0]);
                        $("")
                            .html(markers[i][1])//Use list item label from array
                            .click(function(){
                                displayPoint(marker[0], i);
                                setActive(this);//Show active state
                            })
                            .appendTo("#list");

                        GEvent.addListener(marker[0], "click", function(){
                            displayPoint(marker[0], i);
                            setActive(i);//Show active location
                        });

                        displayPoint(marker[0], i);
                        setActive(i);//Show active location
                        if (i == (markers.length - 1)) {//If last item in array
                            setTimeout(function(){//Remove active class and fade marker after delay
                                $("#map_message").fadeOut();
                                //setActive();
                            }, 3500);
                        }
                    }, delayTime); 
                });

                $("#list").css("opacity","0.2").animate({opacity: 1}, 1100);//Fade in menu
                $("#map_message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

                function displayPoint(marker, index){
                    if ($('#map_message').is(':hidden')) {//Allow toggling of markers
                        $('#map_message').fadeIn();
                    }
                    else{//Remove all .active classes and hide markers
                        $('#map_message').hide();
                        $(".active").removeClass();
                    }
                    //$("#map_message").hide();//Default behaviour, doesn't allow toggling

                    var moveEnd = GEvent.addListener(map, "moveend", function(){
                        var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
                        $("#map_message")
                            .html(markers[index][2])//Use information from array
                            .fadeIn()
                            .css({ top:markerOffset.y, left:markerOffset.x });
                    GEvent.removeListener(moveEnd);
                    });
                    map.panTo(marker.getLatLng());
                }   

                function setActive(el){
                    $(".active").removeClass();//Remove all .active classes
                    $("#list").find('li').eq(el).addClass('active');//Find list element equal to index number and set active
                    $(el).addClass('active');//Set active if list element clicked directly
                }
            }); //End onReady



<div id="map" style="width: 500px; height: 350px; border: 1px solid #777; ">map</div>
<div id="list"></div>
<div id="map_message"></div>


#map { float:left; margin-left: 180px; width:500px; height:350px; }
#map_message { position:absolute; padding:10px; background:#5dbb46; color:#fff; width:200px; height:180px; overflow:auto; }
#list { float:left; width:150px; background:#acacad; color:#fff; list-style:none; padding:0; }
#list li { padding:8px; }
#list li:hover { background:#bdbdbe; color:#fff; cursor:pointer; cursor:hand; }
4

1 に答える 1

1

1) カスタム アイコンが希望の場所を正確に指していません。

MarkerImage クラスを使用して、アイコンの位置を設定してみてください。

function setMarkers(map) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.

  var image = new google.maps.MarkerImage('../images/myimage.png',
      // This marker is 25 pixels wide by 25 pixels tall.
      new google.maps.Size(25, 25),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the center at 12, 13.
      new google.maps.Point(12, 13));

  latlng = new google.maps.LatLng(lat, lng);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: image
  });
 }

2) リスト上の場所をクリックすると、マップはその場所を中心に表示されますが、その結果、情報ウィンドウがマップの下からはみ出してしまいます。マップの左上の象限にマーカー アイコンを表示する方法はありますか?

これが何を意味するのか完全にはわかりませんが、マップの中心はマーカー アイコンと同じ緯度と経度である必要はありません。複数のマップ/マーカーに対して行うこともできます。

または、あなたの質問を受け取っていない可能性があります。

3) 私は情報ウィンドウをスクロールする経験があまりないので、他の誰かが答えてくれるかもしれません。

4) 私の最後の懸念は、ロード後にマップがポイントからポイントへとジャンプする方法です。それぞれの場所が一瞬表示された後、次の場所にジャンプします。この機能を削除して、すべてのマーカーを表示する開始マップ エリアを設定することはできますか?

実際には、開始時にすべてのマーカーを表示する方が簡単です。私の提案は、http://code.google.com/apis/maps/documentation/javascript/overlays.html#ComplexIconsに従ってコードを書き直すことです。従ったサンプルアプリから、スクロール用の「displayPoint」関数を保持して適応させますサイド リンクをクリックすると、別の中心が設定され、その場所の情報ウィンドウが開きます。

マップが「ジャンプ」する理由は、コードがすべてのマーカーを繰り返し処理し、ロード時にそれぞれに対して「displayPoint」を呼び出すためです。

于 2010-09-19T06:30:34.243 に答える