从一个标记画线到所有其他标记并打开每个标记的信息窗口以供单击

Question

Please click here for screen shot我有谷歌地图，它根据条件显示位置之间的关系。我需要的是从一个标记画线到所有其他标记，并打开每个标记的信息窗口以进行标记单击。任何人都可以建议执行任务的方式吗？

Answer 1

 var Markerss = {};
        var linearray = [];
        function initialize() {
            var markers = [{ 'lat': '32.803', 'lon': '-96.7699', 'ExpertsCount': 2, 'Type': 'ofsite' }, { 'lat': '44.9542', 'lon': '-93.1139', 'ExpertsCount': 3, 'Type': 'onsite' }, { 'lat': '32.903', 'lon': '-150.0011', 'ExpertsCount': 5, 'Type': 'offsite' }, { 'lat': '61.85', 'lon': '-97.6501', 'ExpertsCount': 9, 'Type': 'onnsite' }];
            var mapProp = {
                center: new google.maps.LatLng(28.067768, 2.150065),
                zoom: 5,
                mapTypeId: 'terrain'
            };
            //var infowindow = new google.maps.InfoWindow({
            //    content: "Hello World!"
            //});
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
            var icon = "";
            for (i = 0; i <= markers.length; i++) {
                var data = markers[i];
                var myLatlng = new google.maps.LatLng(parseFloat(data.lat), parseFloat(data.lon));
                if (data.Type == "offsite") {

                    icon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';

                }
                else if (data.Type == "onsite") {


                    icon = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
                }
                else {

                    icon = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
                }


                var div = document.createElement('DIV');
                div.innerHTML = '<div class="mapicon" id="dvIcon" style="background-image: url(images/mapiconsmall.png);" onmouseover="javascript:$(this).next().show()" onmouseout="javascript:$(this).next().hide()" ><div class="maindiv"style="width:24px;margin-top:3px; text-align:center;margin-left:1px;"><span style="font-weight:bolder;font-size:11px;"> ' + data.ExpertsCount + '</span></div></div><div id="dvExpName" style="display:none;z-index:1;position:absolute;">' + data.expName + '</div>';
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: i,
                    content: div,
                    flat: true,
                    anchor: RichMarkerPosition.MIDDLE,
                    icon: icon
                });

                Markerss[i] = marker;
                //if (data.Type == "onsite") {
                //    Marker[i].setClickable = false;
                //}
                //else {
                //    Marker[i].setClickable = true;
                //}
                // Attaching a click event to the current marker
                if (markers[i].Type != "onsite") {
                    google.maps.event.addListener(marker, 'click', function (event) {
                        if (linearray.length != 0)
                        {
                            for (i = 0; i < linearray.length; i++) {
                                linearray[i].setMap(null);
                            }

                        }

                        var lineSymbol = {
                            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                            scale: 3,
                            strokeColor: 'red'
                        };
                        for (j = 0; j < markers.length; j++) {
                            var marker = markers[j];
                            var lat = parseFloat(markers[j].lat);
                            var lon = parseFloat(markers[j].lon);
                            if (lat != event.latLng.lat()) {

                                var line = new google.maps.Polyline({
                                    path: [{ lat: event.latLng.lat(), lng: event.latLng.lng() }, { lat: lat, lng: lon }],
                                    icons: [{
                                        icon: lineSymbol,
                                        offset: '100%'
                                    }],
                                    strokeColor: 'red',
                                    map: map
                                });
                                linearray.push(line);
                            }

                            var infoWindow = new google.maps.InfoWindow({
                                content: '<b><i>Expert Count:</i></b> <span>' + parseInt(markers[j].ExpertsCount) + '</span><br/><b><i>Expert Count:</i></b> <span>' + parseInt(markers[j].ExpertsCount) + '</span><br/>'
                            });
                            infoWindow.open(map, Markerss[j]);
                        }
                    });
                }
            }




        }