我正在使用Google地图在我的应用程序中显示方向。我想自定义标记以显示比默认更多的文本，默认只显示位置名称，即城市，州和其他邮政编码。我的想法是在标记气泡上添加自定义文本。这是我迄今为止尝试过的代码。 注意：我试图添加标记但不起作用。并且还使用来自db的json获得填充地图的数据。我在代码之后发布了示例结果。
代码：
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
// get route no
var request='';
var route_no=($(".route_no").attr('id'));
$.ajax({
type: 'POST',
url: base_url+"index.php/routes/getMapData",
data: {
route: route_no
},
success: function(data){
//alert(JSON.stringify(data[0].waypoints))
var datavalues='';
datavalues=data[0];
var wypt=[];
$.each(datavalues.waypoints,function(index,value){
{
wypt.push({location: value.location,stopover: value.stopover})
}
});
request={
origin:""+data[0].origin+"",
destination:""+data[0].destination+"",
waypoints: wypt,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
//Add marker
var mark=[];
$.each(datavalues.title,function(index,value){
mark.push({location:value.location,title: value.company})
});
var marker= new google.maps.Marker( mark );
marker.setMap(map);
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
return false;
},
dataType: 'json'
})
}
示例JSON结果：
[{"origin":"Mantachie MS 38855","destination":"Mantachie MS 38855","waypoints":[{"stopover":true,"location":"JACKSON TN 38305"},{"stopover":true,"location":"UPPER SANDUSKY ON 43351"}],"title":[{"company":"TBMS","location":"Mantachie MS 38855"},{"company":"ARJ MANUFACTURING","location":"JACKSON TN 38305"},{"company":"BRIDGESTONE","location":"UPPER SANDUSKY ON 43351"},{"company":"TBMS","location":"Mantachie MS 38855"}]}]
我想在城市和州的标记上显示公司名称。
谷歌的Here is a sample map显示了方向API的工作原理。
答案 0 :(得分：2)
以下示例自定义图标，infowindow中的文本并在侧边栏中添加条目：http://www.geocodezip.com/v3_directions_custom_iconsC.html
代码段
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
var gmarkers = [];
var map = null;
var startLocation = null;
var endLocation = null;
function initialize() {
var center = new google.maps.LatLng(24.7756, 121.0062);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: center,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var directionsService = new google.maps.DirectionsService();
var request = {
origin: "532 Beacon St., Boston, MA",
destination: "77 Massachusetts Ave, Cambridge, MA",
travelMode: google.maps.DirectionsTravelMode.WALKING
};
var polyline = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 3
});
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
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;
createMarker(legs[i].start_location, "start", legs[i].start_address, "green");
}
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;
detailsPanel.innerHTML += "<li>" + steps[j].instructions;
var dist_dur = "";
if (steps[j].distance && steps[j].distance.text) dist_dur += " " + steps[j].distance.text;
if (steps[j].duration && steps[j].duration.text) dist_dur += " " + steps[j].duration.text;
if (dist_dur != "") {
detailsPanel.innerHTML += "(" + dist_dur + ")<br /></li>";
} else {
detailsPanel.innerHTML += "</li>";
}
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);
createMarker(endLocation.latlng, "end", endLocation.address, "red");
// == create the initial sidebar ==
makeSidebar();
}
});
}
var icons = new Array();
icons["red"] = {
url: "http://maps.google.com/mapfiles/ms/micons/red.png",
// This marker is 32 pixels wide by 32 pixels tall.
size: new google.maps.Size(32, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0, 0),
// The anchor for this image is at 16,32.
anchor: new google.maps.Point(16, 32)
};
function getMarkerImage(iconColor) {
if ((typeof(iconColor) == "undefined") || (iconColor == null)) {
iconColor = "red";
}
if (!icons[iconColor]) {
icons[iconColor] = {
url: "http://maps.google.com/mapfiles/ms/micons/" + iconColor + ".png",
// This marker is 32 pixels wide by 32 pixels tall.
size: new google.maps.Size(32, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0, 0),
// The anchor for this image is at 16,32.
anchor: new google.maps.Point(16, 32)
};
}
return icons[iconColor];
}
// 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 iconImage = {
url: 'http://maps.google.com/mapfiles/ms/micons/red.png',
// This marker is 32 pixels wide by 32 pixels tall.
size: new google.maps.Size(32, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0, 0),
// The anchor for this image is at 16,32.
anchor: new google.maps.Point(16, 32)
};
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var iconShape = {
coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
type: 'poly'
};
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function createMarker(latlng, label, html, color) {
// alert("createMarker("+latlng+","+label+","+html+","+color+")");
var contentString = '<b>' + label + '</b><br>' + html;
var marker = new google.maps.Marker({
position: latlng,
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);
});
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
var html = "";
for (var i = 0; i < gmarkers.length; i++) {
html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
}
document.getElementById("side_bar").innerHTML = html;
}
google.maps.event.addDomListener(window, 'load', initialize);html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map_canvas {
height: 100%
}<script src="http://maps.google.com/maps/api/js"></script>
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<table border="1">
<tr>
<td>
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
</td>
</tr>
<tr>
<td>
<div id="direction_details" style="margin:20px;"></div>
</td>
</tr>
<tr>
<td>
<div id="side_bar" style="margin:20px;"></div>
</td>
</tr>
</table>
</div>