Googleマップのapi v3で運転免許マーカー(地図マーカーではない)を置き換えるにはどうすればよいですか?GoogleマップAPI v3 - カスタム運転の方向標識
私は時々、シンプルさが鍵です...
Googleマップのapi v3で運転免許マーカー(地図マーカーではない)を置き換えるにはどうすればよいですか?GoogleマップAPI v3 - カスタム運転の方向標識
私は時々、シンプルさが鍵です...
このどこかの例を見ていません。
私は、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;
}
私は同じ問題がありました。ジェイソンの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
}
私は方向性を解析し、それらを自分自身を表示する必要があるだろう、タイマーを使用しないようにします。情報ウィンドウには、ウェイポイントに基づくカスタムテキストと詳細ページへのリンクがあります。
これは2つの結果に対してのみ機能します。どのようにこれを任意の量のウェイポイント(足)のために働かせるかに関する考え? –
@DannyCあなたは足の束を設定し、各要素のCSSを取得し、それに応じてそれぞれのスタイルを設定する必要があります。 – Jason