我花了很长时间搜索图书馆并最终找到了它。然而，在最长的时间内，它仍然无法正常工作。
我终于得到了一个例子而不是另一个例子，并且不知道区别是什么：
工作：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerWithLabel Mouse Events</title>
<style type="text/css">
.labels {
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 40px;
border: 2px solid black;
white-space: nowrap;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBktMagIayfc1uZIcQu8H91v45qx3shaNI&sensor=false"></script>
<script src="./files/js/infobubble.js"></script>
<script type="text/javascript" src="./files/js/markerwithlabel.js"></script>
<script type="text/javascript">
function initMap() {
var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new MarkerWithLabel({
position: homeLatLng,
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: "$425K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels" // the CSS class for the label
});
var iw = new google.maps.InfoWindow({
content: "Home For Sale"
});
var infoBubble = new InfoBubble({
maxWidth: 340,
maxHeight: 165
});
infoBubble.addTab('Contact', "<div> <h5 style='text-decoration: underline;'> <B>CONTACT INFORMATION </B></h5> <span style='float:left;'><img src='./images/banner1.jpg' width=100px; height=80px;></img></span> <span style='float:right; font-size: 11.6px; line-height:28px;'> <B>4281 Shooting Park Rd </B> <br/> <B> Peru,IL 61354 </B><br/> <B> 815-223-2800 </B></span> </div>");
google.maps.event.addListener(marker, "click", function (e) { iw.open(map, this); });
google.maps.event.addListener(marker, "click", function (e) { log("Click"); });
google.maps.event.addListener(marker, "dblclick", function (e) { log("Double Click"); });
google.maps.event.addListener(marker, "mouseover", function (e) { log("Mouse Over"); });
google.maps.event.addListener(marker, "mouseout", function (e) { log("Mouse Out"); });
google.maps.event.addListener(marker, "mouseup", function (e) { log("Mouse Up"); });
google.maps.event.addListener(marker, "mousedown", function (e) { log("Mouse Down"); });
google.maps.event.addListener(marker, "dragstart", function (mEvent) { log("Drag Start: " + mEvent.latLng.toString()); });
google.maps.event.addListener(marker, "drag", function (mEvent) { log("Drag: " + mEvent.latLng.toString()); });
google.maps.event.addListener(marker, "dragend", function (mEvent) { log("Drag End: " + mEvent.latLng.toString()); });
google.maps.event.addListener(marker, 'click', function() {
if (!infoBubble.isOpen()) {
infoBubble.open(map, marker);
}
});
}
function log(h) {
document.getElementById("log").innerHTML += h + "<br />";
}
</script>
</head>
<body onload="initMap()">
<p>Try interacting with the marker (mouseover, mouseout, click, double-click, mouse down, mouse up, drag) to see a log of events that are fired. Events are fired whether you are interacting with the marker portion or the label portion.</p>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>
<div id="log"></div>
</body>
</html>
不工作：
<!DOCTYPE html>
<html>
<head>
<title>Shooting Park Road Baptist Church</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./files/css/common.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/files/css/style-ie.css" />
<![endif]-->
<script src="./files/js/jquery-1.7.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="./files/js/infobubble.js"></script>
<script src="./files/js/markerwithlabel.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBktMagIayfc1uZIcQu8H91v45qx3shaNI&sensor=false"></script>
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<script>
$( document ).ready(function() {
$("a.Tag_Nav_Aux").filter(function(){
var daLink = $(this).attr('href').split("?")[0];
var daWindow = "." + window.location.pathname.split("sprbc")[1];
if (daLink.toLowerCase() == daWindow.toLowerCase())
{
$(this).parent().addClass("activePage");
}
});
});
<?php include 'header.php';?>
<h1 style="text-align: center;"> Directions </h1>
<div class="columnWrapper">
<div class="leftColumn">
<div class="map" style="width: 920px;">
<div style="overflow:auto;height:600px;width:920px;"><div id="map_canvas" style="height:600px;width:920px;"></div><a class="google-map-code" href="http://www.map-embed.com" id="get-map-data">map-embed.com</a><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div>
<script type="text/javascript">
map_initialize();
function map_initialize(){
var mapOptions = {
center: new google.maps.LatLng(41.3378333474912, -89.1608098668396),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icon = {
church: {
icon: iconBase + 'church_maps.png'
}
};
var feature =
{
position: new google.maps.LatLng(41.3378333474912, -89.1608098668396),
type: 'church'
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var myLatlng = new google.maps.LatLng(41.3378333474912, -89.1608098668396);
var marker = new MarkerWithLabel({
position: myLatlng,
map: map,
labelContent: "Shooting Park Road Baptist Church",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels" // the CSS class for the label
});
var infoBubble = new InfoBubble({
maxWidth: 340,
maxHeight: 165
});
infoBubble.addTab('Contact', "<div> <h5 style='text-decoration: underline;'> <B>CONTACT INFORMATION </B></h5> <span style='float:left;'><img src='./images/banner1.jpg' width=100px; height=80px;></img></span> <span style='float:right; font-size: 11.6px; line-height:28px;'> <B>4281 Shooting Park Rd </B> <br/> <B> Peru,IL 61354 </B><br/> <B> 815-223-2800 </B></span> </div>");
infoBubble.addTab('Schedule', "<div> <h5 style='text-decoration: underline;'><B> SCHEDULE </B> </h5><br/><?php
$month = date('n');
if ($month == 1 || $month == 2 || $month == 7)
{
?>
<B>Sunday School: 9:30 am<br> Sunday Morning: 10:30 am<br> Sunday Evening: 1:00 pm <br> Wednesday Morning: 10:00 am <br> Kings Kids: 6:30 pm <br> Wednesday Evening: 7:00 pm </B>
<?php
}
else
{
?>
<B>Sunday School: 9:30 am<br> Sunday Morning: 10:30 am<br> Sunday Evening: 6:30 pm <br>Kings Kids: 6:30 pm <br>Wednesday Evening: 7:00 pm </B><?php
}
?><br/><br/></div>");
google.maps.event.addListener(marker, 'click', function() {
if (!infoBubble.isOpen()) {
infoBubble.open(map, marker);
}
});
}
</script>
</div>
<?php include 'footer.php';?>
</body>
</html>