我希望在将鼠标悬停在地图上后，在googlemap外显示信息框。在这个代码mastercluster和信息框工作正常，但问题是只显示在div之外。
var pop = document.getElementById（'example1'）;
var locations = <?php echo json_encode($jsArray); ?>;
var image = 'images/mapmarker.png';
var myLatlng = new google.maps.LatLng(locations[0][0], locations[0][1]);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: false,
disableDefaultUI: true,
visibleInfoWindow: null,
zoomControlOptions: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
};
var mcOptions = {styles: [{
opt_textColor: 'white',
textColor: 'white',
height:34,
url: image,
width:34
}],
description: ' tracks: click to show'
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var markers = [];
for(var i=0;i<locations.length;i++)
{
var latlng=new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
boxText = document.createElement("div");
infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(18, -60),
zIndex: null,
boxStyle: {
opacity: 0.75,
width: "250px"
},
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
markers.push(marker);
boxText.style.cssText = "border: 1px solid black; margin-top:3px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 3px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";
boxText.innerHTML = "<b>Hotel Name</b>: "+locations[i][2] + "<br/><br/>" + "<b>Rating</b>: "+locations[i][3]+"<br/><br/>"+"<b>Price:</b> € "+locations[i][4];
markers[i].infobox = new InfoBox(infoboxOptions);
pop.onmouseout = generateTriggerCallback(marker[i], 'mouseout');
pop.onmouseover = generateTriggerCallback(marker[i], 'mouseover');
$(".popup_slide").hover(function(){
$(this).addClass("resulthover");
},
function () {
$(this).removeClass("resulthover");
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
markers[i].infobox.open(map, this);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
return function() {
markers[i].infobox.close(map, this);
}
})(marker, i));
}
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
function generateTriggerCallback(object, eventType) {
return function() {
google.maps.event.trigger(object, eventType);
};
}
答案 0 :(得分：0)
最后我得到了解决方案，问题解决了。我的问题是我有一个位置设置，我们必须在谷歌地图上显示位置，同时它将在地图外显示结果。增强功能将悬停在结果地图位置之外，将显示在Google地图上。
var locations = <?php echo json_encode($jsArray); ?>;
var foo2 = document.getElementById('foo2');
var generateLink = document.getElementById('generateLink');
var image = 'images/mapmarker.png';
var image_hover = 'images/mapmarker_hover.png';
var img29 = 'images/29cluster.png';
var img34 = 'images/34cluster.png';
var img47 = 'images/47cluster.png';
var img56 = 'images/56cluster.png';
var clusterStyles = [
{
opt_textColor: 'white',
textColor: 'white',
url: img29,
height: 29,
width: 29
},
{
opt_textColor: 'white',
textColor: 'white',
url: img34,
height: 34,
width: 34
},
{
opt_textColor: 'white',
textColor: 'white',
url: img47,
height: 47,
width: 47
},
{
opt_textColor: 'white',
textColor: 'white',
url: img56,
height: 56,
width: 56
}
];
var visibleInfoWindow = null;
var myLatlng = new google.maps.LatLng(locations[0][0], locations[0][1]);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: false,
disableDefaultUI: true,
visibleInfoWindow: null,
zoomControlOptions: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
};
var mcOptions = { styles: clusterStyles,
zoomOnClick: true
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var markers = [];
function generateTriggerCallback(object, eventType) {
return function() {
google.maps.event.trigger(object, eventType);
};
}
function clearMarkers() {
for (var n = 0, marker; marker =markers[n]; n++) {
marker.setVisible(false);
}
}
var div = foo2;
clearMarkers();
var example = [];
for(var i=0;i<locations.length;i++)
{
var latlng=new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
boxText = document.createElement("div");
infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(16, -40),
zIndex: null,
boxStyle: {
opacity: 0.75,
width: "250px"
},
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
markers.push(marker);
var rate = locations[i][3];
if(rate == 1)
{
var rateimg = "<img src='images/rating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/>";
}else if(rate == 2)
{
var rateimg = "<img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/>";
}
else if(rate == 3)
{
var rateimg = "<img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/>";
}else if(rate == 4)
{
var rateimg = "<img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/unactiverating.png' alt=''/>";
}
else if(rate == 5)
{
var rateimg = "<img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/>";
}
//define the text and style for all infoboxes
boxText.style.cssText = "border: 1px solid black;background:#333; padding:3px;color:#FFF; font-family:Arial; font-size:12px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";
boxText.innerHTML = "<div class='marker11'> </div><b>Hotel Name</b>: "+locations[i][2] + "<br/>" + "<b>Rating</b>: "+rateimg+"<br/>"+"<b>Price:</b> € "+locations[i][4];
//Define the infobox
markers[i].infobox = new InfoBox(infoboxOptions);
$(".popup_slide").hover(function(){
$(this).addClass("resulthover");
},
function () {
$(this).removeClass("resulthover");
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
markers[i].infobox.open(map, this);
marker.setIcon(image_hover);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
return function() {
markers[i].infobox.close(map, this);
marker.setIcon(image);
}
})(marker, i));
example[i] = document.getElementById('example' + i);
example[i].onmouseover = generateTriggerCallback(marker, 'mouseover');
example[i].onmouseout = generateTriggerCallback(marker, 'mouseout');
}//end of for loop
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
//globalMarker = markers.slice();
google.maps.event.addListener(markerCluster, "mouseover", function (c) {
var totalcluster = c.getSize();
var centercluster = c.getCenter();
var m = c.getMarkers();
var p = [];
for (var j = 0; j < m.length; j++ ){
p.push(m[j].getPosition());
}
//alert(p);
});
google.maps.event.addListener(markerCluster, "mouseout", function (c) {
});