谷歌地图Infowindow没有显示

时间:2016-08-15 09:52:25

标签: javascript asp.net google-maps google-maps-markers infowindow

我的应用程序中有谷歌地图。除了一个问题,一切都正常。我的引脚显示为泡泡(技术人员的名字),这是有效的。但是,如果我点击这个技术人员(别针)它应该打开一个信息窗口,显示有关技术人员的更多信息,例如呼叫量,到客户端的距离等等(数据被拉过来),这是我唯一的问题。我面临的是,当我点击销/技师时,信息窗口根本没有显示......我已经完成了代码,但似乎无法找到我错误的地方......

这是我的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>

1 个答案:

答案 0 :(得分:2)

根据您的附加代码,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);