InfowWindow 中的迷你地图用于方向路线

Question

我正在使用 Google Map v3（实际上是将 V2 迁移到 V3），并尝试自定义 Direction Service 的 Infowindow。 我可以使用起点、终点和航点来显示方向。 我的地图使用标记（带有 A、B、C... 文本的绿色标记）正确显示了路线。 默认情况下，单击标记信息窗口将显示该标记的地址。 我想对其进行自定义，以便在单击标记时它应该在 Infowindow 中以更大的缩放显示该位置的迷你地图。 我能够取得一些进展，但这里的问题是， - 标记更改为红色指向标记而不是绿色标记（带有 A、B、C...文本） - 无论我点击哪个标记，信息窗口都会在最后一个标记处打开 - 单击标记后，它将显示小地图，但在关闭并再次单击该标记时，它将显示地址（默认行为） - 我的代码实际上是用红色尖标记覆盖绿色标记

soboby 可以帮我解决所有这些问题吗 以下是我的代码：

       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);
                });
            }
        }

我需要以下解决方案： - 如何为所有标记获取自定义信息窗口（带有小地图） - 如何将绿色标记与文本 A、B、C... 附图是我从上面的代码中得到的 我希望我的问题很清楚。 如果有人有任何意见，请告诉我。

谢谢， 沙拉特

Answer 1

将以下对象作为参数传递给 DirectionsRenderer：

{markerOptions:{clickable:false,zIndex:1000}}

它将有两种效果：

1. 自定义标记将放置在 DirectionsRenderer 创建的 A、B、C 标记后面（目前它们仍然存在，但在您的自定义标记后面）

2. DirectionsRenderer 创建的标记不可点击，底层自定义标记可以接收点击。

另一个选项（我更喜欢它）： 将 DirectionsRenderer 的 suppressMarkers-选项设置为 true，并为您的自定义标记使用 A、B、C 标记（例如 https://maps.gstatic.com/mapfiles/markers2/marker_greenA.png , https://maps.gstatic.com/mapfiles/markers2/marker_greenB.png)

与 infoWindow 相关：您只需要 1 个 infoWindow 和 1 个用于所有标记的地图。观察标记的点击事件，当它发生时打开信息窗口并将地图在信息窗口内的标记位置居中（可以通过this.getPosition()在点击回调中检索）

注意：与其使用预定义的航点，不如解析directionsService返回的路线以将自定义标记放置在准确的位置（这些可能与预定义的航点不同）