如何在Google Map之外打开标记信息窗口

时间:2010-08-24 08:32:44

标签: javascript google-maps window

任何人都可以提供帮助。我有下面的代码,它工作正常,但我想打开谷歌地图以外的信息窗口。

示例:<a href='javascript:void(0)' onclick='infoopen("1")'>Marker 1</a>

JavaScript代码:

var infowindow;
var map;
var mapDrawn = false;
var hotels = [];
var markers = [];

Site.gmapInit = function(centerX, centerY, zoom, clustering, panoramaID) {
    if (mapDrawn) return false;

    var centerX     = (centerX == null) ? 27.9944 : centerX;
    var centerY     = (centerY == null) ? -9.8437 : centerY;
    var zoom        = (zoom == null) ? 2 : zoom;
    var clustering  = (clustering == null) ? false : clustering;
    var panoramaID  = (panoramaID == null) ? "" : panoramaID

    var streetView  = (panoramaID != "");

    (function () {

        google.maps.Map.prototype.markers = new Array();

        google.maps.Map.prototype.addMarker = function(marker) {
            this.markers[this.markers.length] = marker;
        };

    })();   


    var iconShape = { 
        coord: [14,0,16,1,17,2,18,3,19,4,19,5,20,6,20,7,20,8,20,9,20,10,20,11,20,12,20,13,20,14,19,15,19,16,18,17,18,18,18,19,17,20,17,21,16,22,16,23,15,24,15,25,14,26,14,27,13,28,13,29,12,30,12,31,11,32,11,33,11,34,9,34,9,33,9,32,8,31,8,30,7,29,7,28,6,27,6,26,5,25,5,24,4,23,4,22,3,21,3,20,3,19,2,18,2,17,1,16,1,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,1,5,1,4,2,3,3,2,4,1,6,0], 
        type: 'poly' 
    };


    var latlng = new google.maps.LatLng(centerX, centerY);
    var mapOptions = {
        zoom: zoom,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: streetView,
        scrollwheel: false

    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    // Initialize Fluster and give it an existing map
    if (clustering)
        var fluster = new Fluster2(map); 

    // Initialize markers for hotels
    for (var i = 0; i < hotels.length; i++) {
        var hotel = hotels[i];
        if (hotel[2] != '') {
            var myLatLng = new google.maps.LatLng(hotel[0], hotel[1]);
            // Add the marker to the Fluster
            if (clustering) {
                fluster.addMarker(createMarker(hotel, myLatLng)); 
            } else {
                map.addMarker(createMarker(hotel, myLatLng));
            }
        }
    }

    function createMarker(hotel, latlng, i) {
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: hotel[4],
            shape: iconShape,
            title: hotel[2],
            zIndex: 1
        });



        google.maps.event.addListener(marker, "click", function() {
            if (infowindow) infowindow.close();
            infowindow = new google.maps.InfoWindow({content: '<h5>' + hotel[2] + '</h5><a href="#hotelid' + hotel[3] + '">Book now</a>'});
            infowindow.open(map, marker);
        });
        return marker;
    }







    if (clustering) {
        // Set fluster styles for more than 0, 10, 20 and 40 markers
        fluster.styles = {
            0: {
                //image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m1.png',
                image: 'img/markers/fluster0.png',
                textColor: '#FFFFFF',
                width: 54,
                height: 54
            },
            10: {
                //image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m2.png',
                image: 'img/markers/fluster1.png',
                textColor: '#FFFFFF',
                width: 58,
                height: 58
            },
            20: {
                //image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m3.png',
                image: 'img/markers/fluster2.png',
                textColor: '#FFFFFF',
                width: 66,
                height: 66
            },
            40: {
                //image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m4.png',
                image: 'img/markers/fluster3.png',
                textColor: '#FFFFFF',
                width: 80,
                height: 80
            }
        };

        // Initialize Fluster
        // This will set event handlers on the map and calculate clusters the first time.
        fluster.initialize(); 
    }

    // Do we need street view?
    if (panoramaID != '') {
        var panoramaOptions = {
            position: latlng,
            pov: {
                heading: 34,
                pitch: 10,
                zoom: 1
            }
        };
        var panoramaView = new google.maps.StreetViewPanorama(document.getElementById(panoramaID), panoramaOptions);
        map.setStreetView(panoramaView);
    }

    mapDrawn = true;

}

// mapSetCenter() - Relocate/center a Google map
Site.mapSetCenter = function(lat, lng, zoom) {
map.setCenter(new google.maps.LatLng(lat, lng));
    if (zoom > 0) map.setZoom(zoom);
}

1 个答案:

答案 0 :(得分:0)

我知道这是一个非常古老的问题,但它有一个非常简单的答案。标记只是对象;如果你想引用它们,你必须在某处继续指向它们,例如在全局可访问的数组中,如Site.markers。您可以在创建时轻松地将它们粘贴到此数组中(我的更改使用连字符设置):

// Initialize markers for hotels
for (var i = 0; i < hotels.length; i++) {
    var hotel = hotels[i];
    if (hotel[2] != '') {
        var myLatLng = new google.maps.LatLng(hotel[0], hotel[1]);
        // -----------------
        // make marker first and store a reference
        var marker = createMarker(hotel, myLatLng);
        Site.markers.push(marker);
        // -----------------
        if (clustering) {
            // Add the marker to the Fluster
            fluster.addMarker(marker); 
        } else {
            map.addMarker(marker);
        }
    }
}

然后,您需要一种简单的方法来打开标记实例上的信息窗口,这是您当前在click事件中添加的内容。将其转换为标记上的方法可以在以后的事件上下文中轻松调用它:

// make the method
marker.openInfoWindow = function() {
    if (infowindow) infowindow.close();
    infowindow = new google.maps.InfoWindow({content: '<h5>' + hotel[2] + '</h5><a href="#hotelid' + hotel[3] + '">Book now</a>'});
    infowindow.open(map, marker);
};
// put the method in as a handler
google.maps.event.addListener(marker, "click", marker.openInfoWindow);

现在很容易引用标记并调用方法:<a href='javascript:void(0)' onclick='Sites.markers[1].openInfoWindow();'>Marker 1</a>