Google maps InfowWindow中的方向路线迷你地图
我正在Google Map v3中工作(实际上是将V2迁移到v3),并尝试自定义方向服务的信息窗口。 我能够使用起点、目的地和航路点显示方向。 我的地图正确显示了带有标记的路线(带有A、B、C…文本的绿色标记)。 默认情况下,单击标记信息窗口将显示该标记的地址。 我想对它进行自定义,这样在单击标记时,它应该在信息窗口中以更大的缩放显示该位置的迷你地图。 我可以取得一些进展,但问题是, -标记更改为红色指向标记而不是绿色标记(带有A、B、C…文本) -无论单击哪个标记,信息窗口都将在最后一个标记上打开 -单击标记后,它将显示小地图,但在关闭并再次单击该标记时,它将显示地址(默认行为) -我的代码实际上是用红点标记覆盖绿色标记 soboby能帮我解决这些问题吗 下面是我的代码:Google maps InfowWindow中的方向路线迷你地图,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,我正在Google Map v3中工作(实际上是将V2迁移到v3),并尝试自定义方向服务的信息窗口。 我能够使用起点、目的地和航路点显示方向。 我的地图正确显示了带有标记的路线(带有A、B、C…文本的绿色标记)。 默认情况下,单击标记信息窗口将显示该标记的地址。 我想对它进行自定义,这样在单击标记时,它应该在信息窗口中以更大的缩放显示该位置的迷你地图。 我可以取得一些进展,但问题是, -标记更改为红色指向标记而不是绿色标记(带有A、B、C…文本) -无论单击哪个标记,信息窗口都将在最后一个标记上
function CreateDirection (arrWaypoints) {
if (!this.directions) {
this.directions = new google.maps.DirectionsService();
var origin = arrWaypoints[0];
var destination = arrWaypoints[arrWaypoints.length - 1];
var tripWaypoints = [];
for (var i = 1; i < arrWaypoints.length - 1; i++) {
tripWaypoints.push({
location: new google.maps.LatLng(arrWaypoints[i].hb, arrWaypoints[i].ib),
stopover: true
});
}
var myMap = MyMap.getMap();
var steps = [];
this.directions.route({
origin: origin,
destination: destination,
waypoints: tripWaypoints,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.METRIC
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay = new google.maps.DirectionsRenderer();
// directionDiv div element in my page
directionsDisplay.setPanel(document.getElementById("directionDiv"));
directionsDisplay.setMap(myMap);
directionsDisplay.setDirections(result);
}
});
}
}
function CreateMiniMapInfoWindow (wayPointsArray) {
for (var i = 0; i < wayPointsArray.length; i++) {
var myMap = MyMap.getMap();
var marker = new google.maps.Marker({
position: wayPointsArray[i],
map: myMap
});
google.maps.event.addListener(marker, 'click', function() {
var myOptionsMini = {
zoom: 14,
center: wayPointsArray[i],
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var infowindow = new google.maps.InfoWindow();
var minimap = new google.maps.Map(document.getElementById ("minimap"), myOptionsMini);
document.getElementById("minimap").style.display = 'block';
minimap.setCenter(marker.getPosition());
var minimapDiv = document.getElementById("minimap");
infowindow.setContent(minimapDiv);
infowindow.open(myMap, marker);
});
}
}
函数CreateDirection(arrWaypoints){
如果(!本说明){
this.directions=new google.maps.DirectionsService();
var原点=到达点[0];
var destination=arrWaypoints[arrWaypoints.length-1];
var tripWaypoints=[];
对于(变量i=1;i
我需要解决以下问题:
-如何获得所有标记的自定义信息窗口(带有小地图)
-如何把绿色标记与文本A,B,C。。。
所附图片是我从上述代码中得到的
我希望我的问题是清楚的。
如果有人有任何意见,请告诉我
谢谢,
Sharath将以下对象作为参数传递给DirectionsRenderer:
{markerOptions:{clickable:false,zIndex:1000}}
它将产生两种效果:
suppressMarkers
-选项设置为true,并将A、B、C标记用于自定义标记(例如,)
与信息窗口相关:您只需要一个信息窗口,其中包含一张所有标记的地图。观察标记的单击事件,当它发生时,打开信息窗口并将地图居中放置在标记位置的信息窗口内(可通过this.getPosition()
在单击回调中检索)
注意:与其使用预定义的航路点,不如分析directionsService返回的路线,将自定义标记放置在准确的位置(这些位置可能不同于预定义的航路点)将以下对象作为参数传递给DirectionsRenderer:
{markerOptions:{clickable:false,zIndex:1000}}
它将产生两种效果:
suppressMarkers
-选项设置为true,并将A、B、C标记用于自定义标记(例如,)
与信息窗口相关:您只需要一个信息窗口,其中包含一张所有标记的地图。观察标记的单击事件,当它发生时,打开信息窗口并