任何人都可以提供帮助。我有下面的代码,它工作正常,但我想打开谷歌地图以外的信息窗口。
示例:<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);
}
答案 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>