javascript - Google map 信息窗口未显示

Question

我的应用程序中有谷歌地图。除了一个问题之外，一切都按其应有的方式运行。我的引脚显示为气泡(技术人员的姓名)，它正在工作。但是，如果我单击该技术人员(引脚)，它应该打开一个信息窗口，显示有关技术人员的更多信息，例如调用数量、与客户的距离等...(数据正在拉取)，这是我遇到的唯一问题我面临的是，当我单击 pin/技术人员时，信息窗口根本不显示...我已经浏览了代码，但似乎找不到我出错的地方...

这是我的 JavaScript 代码:

    <script type="text/javascript">

    $(document).ready(function () {

        var marker = $("#<%= txtTechnicians.ClientID %>").val();
        var markers = JSON.parse(marker);

        var markerCustomer = $("#<%= txtCustomer.ClientID %>").val();
        var markerCust = JSON.parse(markerCustomer);

        function initialize() {

            var map = new google.maps.Map(document.getElementById("dvMap"), {
                center: new google.maps.LatLng(markerCust[0].lat, markerCust[0].lng),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions:
                   {
                       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                       poistion: google.maps.ControlPosition.TOP_RIGHT,
                       mapTypeIds: [google.maps.MapTypeId.ROADMAP,
                         google.maps.MapTypeId.TERRAIN,
                         google.maps.MapTypeId.HYBRID,
                         google.maps.MapTypeId.SATELLITE]
                   },
                streetViewControl: true,
                navigationControl: true,
                navigationControlOptions:
                {
                    style: google.maps.NavigationControlStyle.ZOOM_PAN
                },
                scaleControl: true,
                draggableCursor: 'move'
            });

            var trafficLayer = new google.maps.TrafficLayer();
            trafficLayer.setMap(map);

            var poly = new google.maps.Polyline({ map: map, strokeColor: '#FF8200' });
            poly.setMap(map);

            var lat_lngCust = new Array();
            for (i = 0; i < markerCust.length; i++) {
                var data = markerCust[i]
                var myLatlngCust = new google.maps.LatLng(data.lat, data.lng); lat_lngCust.push(myLatlngCust);
                var markerCustomer = new StyledMarker({
                    styleIcon: new StyledIcon(StyledIconTypes.BUBBLE, { color: "#D20202", text: data.title }),
                    position: myLatlngCust, map: map, title: data.title
                });

                (function (markerCustomer, data) {
                    google.maps.event.addListener(markerCustomer, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, markerCustomer);
                    });
                })(markerCustomer, data);
            }

            var lat_lng = new Array();
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng); lat_lng.push(myLatlng);
                var marker = new StyledMarker({
                styleIcon: new StyledIcon(StyledIconTypes.BUBBLE, { color: data.colourcode, text: data.title }),
                    position: myLatlng, map: map, title: data.title
                });

                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    });
</script>

Answer 1

根据您附加的代码，infoWindow 未在任何地方定义。

我认为你只是错过了这一行；var infoWindow = new google.maps.InfoWindow();

见下文:

(function (marker, data) {
    google.maps.event.addListener(marker, "click", function (e) {
        infoWindow.setContent(data.description); // @SEE: infoWindow is used but not initialized or declare anywhere within the scope.
        infoWindow.open(map, marker); // same
    });
})(marker, data);