2012-01-17 10 views

答えて

3

このどこかの例を見ていません。

私は、CSSを使って、私の質問に答え:

を行が表である:

<table id="adp-placemark" class="adp-placemark" jstcache="0"> 

とBラインは次のとおりです。

<table class="adp-placemark" jstcache="0"> 

したがって、次のCSSはマーカーを変更します:

#adp-placemark img, .adp-placemark img { 
    display:none; 
} 
#adp-placemark { 
    font-weight: bold; 
    padding: 10px 10px 10px 30px; 
    background: white url(../images/map_icons/number_1.png) no-repeat left center; 
} 
.adp-placemark { 
    font-weight: bold; 
    padding: 10px 10px 10px 30px; 
    background: white url(../images/map_icons/number_2.png) no-repeat left center; 
} 
+0

これは2つの結果に対してのみ機能します。どのようにこれを任意の量のウェイポイント(足)のために働かせるかに関する考え? –

+0

@DannyCあなたは足の束を設定し、各要素のCSSを取得し、それに応じてそれぞれのスタイルを設定する必要があります。 – Jason

4

私は同じ問題がありました。ジェイソンのCSS使用のソリューションと同様に、私はjQueryを使用して、アイコン画像を手動で自分のアイコン画像に置き換えました。これは私がマップや方向で同じアイコンイメージを使用することができます。これにより、マップまたはルートパネルでマーカーをクリックしたときにクリックハンドラーを使用して同じ情報ウィンドウを開くこともできます。私は自宅と終わりの両方の場所に異なるアイコンを使用し、ウェイポイントには昇順の数字マーカーを使用します。 1つの厄介な警告は、1.5秒待つためにJavaScriptタイマーを使用する必要があったため、その方向がレンダリングを非同期から終了し、コールバックがないことを確かめることができたということでした。画像はDOMに追加されるまで置き換えられません。ここ は私のコードです:

function renderDrivingDirections(directionsResponse){ 
    var directionRenderOptions = { 
      map: map, 
      panel: directionsPanel, 
      suppressInfoWindows: true, 
      suppressMarkers: true 
    }; 
    var directionsRenderer = new google.maps.DirectionsRenderer(directionRenderOptions); 
    directionsRenderer.setDirections(directionsResponse); 
    /* Replace the default map markers with custom ones for following reasons: 
     1) Control over icon. (Custom icons for start and finish) 
     2) Control over icon color (to match the action status) 
     3) Control infowindow that opens on marker click (Add Call/Action, add link to action details) 
     However, we using the default rendering for the lines, and for text output of directions. So we need to wait 1.5 seconds after load 
    */ 
    window.setTimeout( 
      function(){ 
       showWaypointMarkers(directionsResponse); 
       showOriginDestinationMarkers(); 
      }, 
      1500 
    ); 
} 

function showWaypointMarkers(directionsResponse) { 
    var routeLegs = directionsResponse.routes[0].legs; 
    var allImages = jQuery(directionsPanel).find("img"); 
    for (var i = 0, len = routeLegs.length -1; i < len; i++) { 
     var iconUrl = "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=" + (i+1) + "|ffffff|000000"; 
     var marker = new google.maps.Marker({ 
      position: routeLegs[i+1].start_location, 
      map: map, 
      title: "Stop number: " + i, 
      icon: {url: iconUrl} 
     }); 
     var iconImageObj = jQuery("<img src='" + iconUrl + "'>"); 
     attachInfoWindow(marker, iconImageObj, i, routeLegs[i+1]);    
     allImages.eq(i+1).replaceWith(iconImageObj); 
    } 
} 

function attachInfoWindow(marker, iconImageObj, legIndex, leg) { 
    var infowindow = new google.maps.InfoWindow({ 
     content: "<div><h3>Stop Number: " + legIndex + "</h3><p>" + leg.start_address + "</p><a href='#'>(Stop Details)</a></div>" 
    }); 
    google.maps.event.addListener(marker, 'click', function(){ //when the marker on map is clicked open info-window 
     infowindow.open(map,marker); 
    }); 
    iconImageObj.click(function(){ //when the marker on the driving directions is clicked, open info-window 
     infowindow.open(map,marker); 
    }); 
} 
function showOriginDestinationMarkers(){ //here using same icon for first and last 
    var iconUrl = "https://chart.googleapis.com/chart?chst=d_map_pin_icon_withshadow&chld=home|000000|FFFFFF"; //home icon 
    new google.maps.Marker({ //add home location to map 
     position: homeLocation, 
     map: map, 
     title: messages.homeLocationTitle, 
     icon: {url: iconUrl} 
    }); 
    jQuery(directionsPanel, "img").first().replaceWith("<img src='" + iconUrl + "'>"); //replace their icon with ours 
    jQuery(directionsPanel, "img").last().replaceWith("<img src='" + iconUrl + "'>"); //replace their icon with ours 
} 

私は方向性を解析し、それらを自分自身を表示する必要があるだろう、タイマーを使用しないようにします。情報ウィンドウには、ウェイポイントに基づくカスタムテキストと詳細ページへのリンクがあります。

+0

素晴らしい答え。私はこのやり方も検討しましたが、タイミングの問題もありました。 – Jason

+0

うわー!本当に優れた答え! Upvote! –

+1

これはハックですが、うまくいきます!私はgoogle.maps.event.addListenerOnce(map、 'idle'、function(){....})を使用しました。 – Roeland

関連する問題