如何在谷歌地图Api中替换A和B标记
How to replace A and B markers in Google Map Api
我正在使用
google.maps.DirectionsRenderer({suppressMarkers: true})
删除路线中的标记。但这也会删除该路线中的路点标记。那么,如何替换/删除路线中的"A"answers"B"标记呢?
这里有一个用自定义标记替换所有标记的示例。
这里有一个示例,它只是用自定义标记替换开始和结束标记。
自定义方向渲染器(将方向渲染为本机多段线和标记):
function RenderCustomDirections(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
waypts = [];
var bounds = new google.maps.LatLngBounds();
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
var detailsPanel = document.getElementById("direction_details");
startLocation = new Object();
endLocation = new Object();
summaryPanel.innerHTML = "";
detailsPanel.innerHTML = '<ul>';
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
summaryPanel.innerHTML += route.legs[i].start_address + " to ";
summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
}
var path = response.routes[0].overview_path;
var legs = response.routes[0].legs;
for (i=0;i<legs.length;i++) {
if (i == 0) {
startLocation.latlng = legs[i].start_location;
startLocation.address = legs[i].start_address;
startLocation.marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
} else {
waypts[i] = new Object();
waypts[i].latlng = legs[i].start_location;
waypts[i].address = legs[i].start_address;
waypts[i].marker = createMarker(legs[i].start_location,"waypoint"+i,legs[i].start_address,"yellow");
}
endLocation.latlng = legs[i].end_location;
endLocation.address = legs[i].end_address;
var steps = legs[i].steps;
for (j=0;j<steps.length;j++) {
var nextSegment = steps[j].path;
for (k=0;k<nextSegment.length;k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
detailsPanel.innerHTML += "</ul>"
polyline.setMap(map);
map.fitBounds(bounds);
endLocation.marker = createMarker(endLocation.latlng,"end",endLocation.address,"red");
// == create the initial sidebar ==
makeSidebar();
} else alert(status);
}
createMarker函数:
function createMarker(latlng, label, html, color) {
var contentString = '<b>'+label+'</b><br>'+html;
var marker = new google.maps.Marker({
position: latlng,
draggable: true,
map: map,
icon: getMarkerImage(color),
shape: iconShape,
title: label,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
marker.myname = label;
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
return marker;
}
自定义图标功能:
function getMarkerImage(iconColor) {
if ((typeof(iconColor)=="undefined") || (iconColor==null)) {
iconColor = "red";
}
if (!icons[iconColor]) {
icons[iconColor] = {
url: "mapIcons/marker_"+ iconColor +".png",
// This marker is 20 pixels wide by 34 pixels tall.
size: new google.maps.Size(20, 34),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is at 6,20.
anchor: new google.maps.Point(9, 34));
}
return icons[iconColor];
}
相关文章:
- 用cdata标记替换脚本标记
- Javascript/jQuery:用HTML span标记替换单引号中的文本
- 用HTML标记+ 替换关闭的HTML标记
- 如何将页面中的某些标记替换为空
- 使用 JavaScript 将 img 标记替换为 alt
- 将 HTML 标记替换为 Grunt-Replace
- 如何在 jquery 中将
标记替换为 (换行符) - 如何将删除标记替换为输入类型文本
- 谷歌地图v3-将标记替换为infoWindow显示
- 用()标记替换括号的开头和结尾标记
- 搜索/将自定义标记替换为 javascript 正则表达式
- 将 HTML 结束标记替换为 HTML 标记 + 分析
- JavaScript 用具有特定 ID 的正则表达式 img 标记替换,但其他属性可以是任何属性
- 用 html 标记替换段落中的每个单词
- 在 Jquery 中用锚标记替换所有包含子字符串的字符串,href 属性应该是实际字符串
- 将 HTML 标记替换为另一个 HTML
- Regex用HTML标记替换字符
- Regex-用图像标记替换URL
- 用html标记替换所有空白,将剩余单词括起来
- 将整个标记替换为字符串中的一个字符串