Question

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

覆盖绿色标记

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 ... enter image description here 附图是我从上面的代码得到的我希望我的问题很明确。如果有人有任何意见，请告诉我。

谢谢，沙拉斯

Answer 1

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

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

它将产生两种效果：

自定义标记将放置在由DirectionsRenderer创建的A，B，C标记后面（目前它们仍然存在，但在您的自定义标记后面）
DirectionsRenderer创建的标记不可点击，基础自定义标记可以接收点击。

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

与infoWindow相关：您只需要1个infoWindow，其中包含1张所有标记的地图。观察标记的点击事件，当它出现时打开infoWindow并将地图置于infowindow内部的标记位置（可以通过this.getPosition()在点击回调中检索）

注意：而不是使用预定义的航点，您最好解析directionsService返回的路线，将自定义标记放在确切的位置（这些可能与预定义的航点不同）

信息窗口中的迷你地图方向路线

1 个答案: