多个标记和打开/关闭信息窗口

时间:2014-04-24 00:51:41

标签: javascript google-maps google-maps-api-3 google-maps-markers infowindow

我正在使用谷歌地图V3,我在这里和网络中查看了许多主题,了解如何使用多个标记并打开/关闭信息窗口。我能够单独完成每一个,但不能在一起。

我的代码中有一些注释掉的部分来自于在线试验和查看参考文献。我想知道是否有人能够看到我指向哪里错误并解释他们为什么做他们所做的事情。 我的maxWidth也没有设置正确的宽度,我不确定为什么。我已经多次更改了大小,并且没有对地图上的infowindow进行任何更改。

谢谢!

map.js文件:

$(document).ready(function() {

function initialize() {
      var defaultCoords = new google.maps.LatLng(42.730173,-73.678810);
      var mapOptions = {
        zoom: 16,
        center: defaultCoords,
        streetViewControl: false,
        zoomControl: false
      }
      var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);


    $.getJSON('resources/js/searchtest.json', function (response)
    {
        handleData(response, map);
        //handling errors in search queries
        if (response.errors.length > 0) {
            console.log(response.errors);
            for (var i=0; i<response.errors.length; i++) {
                $('#searchErrors').append("<p>" + response.errors[i] + "</p>");
            }
        }

    });

    }

    google.maps.event.addDomListener(window,'resize',initialize);
    google.maps.event.addDomListener(window, 'load', initialize);

    function handleData(response, map) {
        //alert(response);
        var lat, lon, myLatLng,
            marker, infowindow, contentString;
        var infowindow = null;
        var activeWindow = null;

        $.each( response.posts, function(i, post) { //add marker each time
            contentString = '';
            lat = post.latitude;
            lon = post.longitude;
            myLatLng = new google.maps.LatLng(lat,lon);
            marker = new google.maps.Marker({ //creating new marker
                position: myLatLng,
                map: map
            });

            //what is in info window
            contentString = "<h4>" + post.title + "</h4>"
            + "</br>" + convertTime(post.time);

            infowindow = new google.maps.InfoWindow({
                content: contentString, //putting content in window
                maxWidth: 160
            });

            google.maps.event.addListener(marker, 'click', getInfoCallback(map, activeWindow, contentString));
        });

        //setting the new center after getting the items
        map.setCenter(new google.maps.LatLng(response.centralLat, response.centralLon));


    }

    function convertTime(UNIXtime) {
        // var formattedTime = UNIXtime;
        // return formattedTime;
    }

    function getInfoCallback(map, activeWindow, content) {
        var infowindow = new google.maps.InfoWindow({
            content: content});
        return function() {

            //infowindow.setContent(content); 
            //close active window if exists
            if(activeWindow != null) activeWindow.close();
            //open new window
            infowindow.open(map, this); //adding listening for window
            activeWindow = infowindow; //store new window in global variable

            };
    }
});

0 个答案:

没有答案