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

Question

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

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




        }