我使用google API在我的网页上绘制了路线图。现在让我说我已经打印了从A点到B点的路线图，它从C点开始。现在我在地图中显示了一个带有C点的标记。它适用于Chrome，但不适用于Internet Explorer。
这是我的代码。要运行它，请从列表中选择一个地址，然后单击“提交”
<html>
<head>
key=25888957881@project.googleusercontent.com
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Waypoints in directions</title>
<style type="text/css">
.labels
{
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 40px;
border: 2px solid black;
white-space: nowrap;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type="text/javascript"
src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>
<script type="text/javascript" language=javascript>
var latLng = new google.maps.LatLng(41.850033, -87.6500523);
var homeLatLng = new google.maps.LatLng(41.850033, -87.6500523);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function SetfC(src) {
document.getElementById('id1').focus();
src.blur();
}
function ShowPhoneNumber(address, Number, Text) {
codeAddress(address, Number, Text);
}
function codeAddress(address, Number, Text) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker1 = new MarkerWithLabel({
position: results[0].geometry.location,
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: Number,
labelAnchor: new google.maps.Point(results[0].geometry.location),
labelClass: "labels", // the CSS class for the label
labelStyle: { opacity: 0.75 },
icon: {}
});
var iw1 = new google.maps.InfoWindow({
content: Text
});
google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); });
}
else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionsPanel'));
calcRoute();
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected == true) {
ShowPhoneNumber(checkboxArray[i].value, 'NUM', 'Rohit ');
waypts.push({
location: checkboxArray[i].value,
stopover: true
});
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
// 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>';
}
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input onclick="alert(2+2)" type="button" id="id1" value="click"/>
<select id="opt" onfocus="SetfC(this);" onmouseup="SetfC(this);">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<div id="map-canvas" style="float:left;width:60%;height:85%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<div style="margin:20px;border-width:2px;">
<b>Start:</b>
<select id="start">
<option value="Halifax, NS">Halifax, NS</option>
<option value="Boston, MA">Boston, MA</option>
<option value="New York, NY">New York, NY</option>
<option value="Miami, FL">Miami, FL</option>
</select>
<br>
<b>Waypoints:</b> <br>
<i>(Ctrl-Click for multiple selection)</i> <br>
<select multiple id="waypoints">
<option value="VILLA RICA, 65 E INDUSTRIAL CT, GA, 30180-1037 Time: 12:00PM to 1:00 PM">Montreal, QBC</input>
<option value="4025 PLEASANTDALE RD, DORAVILLE, GA, 30340-4262 Time: 00:00AM to 1:00 AM">Toronto, ONT</input>
<option value="chicago, il">Chicago</input>
<option value="winnipeg, mb">Winnipeg</input>
<option value="fargo, nd">Fargo</input>
<option value="calgary, ab">Calgary</input>
<option value="spokane, wa">Spokane</input>
</select>
<br>
<b>End:</b>
<select id="end">
<option value="Vancouver, BC">Vancouver, BC</option>
<option value="Seattle, WA">Seattle, WA</option>
<option value="San Francisco, CA">San Francisco, CA</option>
<option value="Los Angeles, CA">Los Angeles, CA</option>
</select>
<br>
<input type="submit" onclick="calcRoute();">
</div>
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
</div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
<p>Total Distance: <span id="total"></span></p>
</body>
由于
答案 0 :(得分：0)
答案在这里： Google Maps JavaScript API Error In Internet Explorer
基本上，您需要将map声明为全局变量。 像这样：
var map;
在全球范围内。
答案 1 :(得分：0)
问题是Marker没有接受Anchor点。所以我改变了代码形式
labelAnchor: new google.maps.Point(results[0].geometry.location)
到
labelAnchor: new google.maps.Point(22,0)
现在它正处于正确的位置