1

我正在使用 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 一起放置... 在此处输入图像描述 附件图像是我从上面的代码中得到的我希望我的问题很清楚。如果有人有任何意见，请告诉我。

谢谢，沙拉特

4

1 回答 1

1

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

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

它将有2个效果：

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

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

另一个选项（我更喜欢它）：将 DirectionsRenderer 的suppressMarkers-option 设置为 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返回的路线，而不是使用您的预定义航点，以将自定义标记放置在确切位置（这些可能与您预定义的航点不同）

于 2013-05-11T02:24:40.073 回答