【发布时间】：2017-07-10 19:35:54
【问题描述】：
我正在构建一个谷歌地图，我想在鼠标悬停在标记上时显示一些信息，然后在用户点击地图时显示更详细的信息。我通过添加两个信息窗口找到了解决方案。
html
<div id="map-canvas"></div>
css
#map-canvas {
height: 400px;
width: 100%;
}
js
"use strict";
// variable to hold a map
var map;
// variable to hold current active InfoWindow
var activeInfoWindow ;
// ------------------------------------------------------------------------------- //
// initialize function
// ------------------------------------------------------------------------------- //
function initialize() {
// map options - lots of options available here
var mapOptions = {
zoom : 6,
draggable: true,
center : new google.maps.LatLng(43.637599, 1.319152),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map in div called map-canvas using map options defined above
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// define three Google Map LatLng objects representing geographic points
var barca = new google.maps.LatLng(41.387042, 2.181382);
var toulouse = new google.maps.LatLng(43.637599, 1.319152);
var madrid = new google.maps.LatLng(40.424803, -3.698083);
// place markers
fnPlaceMarkers(barca,"Barcelona");
fnPlaceMarkers(toulouse,"Toulouse");
fnPlaceMarkers(madrid,"Madrid");
}
// ------------------------------------------------------------------------------- //
// create markers on the map
// ------------------------------------------------------------------------------- //
function fnPlaceMarkers(myLocation,myCityName){
var marker = new google.maps.Marker({
position : myLocation
});
//var lat_lng = {lat: 17.08672, lng: 78.42444};
// Renders the marker on the specified map
marker.setMap(map);
// create an InfoWindow - for mouseover
var infoWnd = new google.maps.InfoWindow();
// create an InfoWindow - for mouseclick
var infoWnd2 = new google.maps.InfoWindow(
{
//pixelOffset: new google.maps.Size(200,0)
//position: {40.424803, -3.698083}
//content: contentString
}
);
// -----------------------
// ON MOUSEOVER
// -----------------------
// add content to your InfoWindow
infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + ' This appears when you put your mouse over a marker</div>');
// add listener on InfoWindow for mouseover event
google.maps.event.addListener(marker, 'mouseover', function() {
// Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Close info Window on mouseclick if already opened
infoWnd2.close();
// Open new InfoWindow for mouseover event
infoWnd.open(map, marker);
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd;
});
// on mouseout (moved mouse off marker) make infoWindow disappear
google.maps.event.addListener(marker, 'mouseout', function() {
infoWnd.close();
});
// --------------------------------
// ON MARKER CLICK - (Mouse click)
// --------------------------------
// add content to InfoWindow for click event
infoWnd2.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '. <br/> This appears when you click on marker</div>');
// add listener on InfoWindow for click event
google.maps.event.addListener(marker, 'click', function() {
//Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Open InfoWindow - on click
infoWnd2.open(map, marker);
// Close "mouseover" infoWindow
infoWnd.close();
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd2;
});
}
// ------------------------------------------------------------------------------- //
// initial load
// ------------------------------------------------------------------------------- //
google.maps.event.addDomListener(window, 'load', initialize);
效果很好，你可以在这里看到它：
https://codepen.io/anon/pen/JJLVNB
但我想改进这一点。我看到了我非常喜欢的东西。如何在谷歌地图的左上角添加一个 html 信息窗口，就像他们在 booking.com（下面的图片）上点击标记一样。当您在某个位置内时，您可以单击“在地图上显示”，它将显示我喜欢的此功能。
如何创建在悬停时显示信息窗口然后单击另一个始终位于左上方的信息窗口的功能？
【问题讨论】：
-
那么根据你的Codepen，你只需要在左上角添加静态信息窗口？
-
是的。这是我的主要问题。之后添加 html 应该不难。
-
更新：这对我来说不是 css 问题，这里是 js 问题