在Google Maps 上点击标签后显示说明
Posted my4piano
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Google Maps 上点击标签后显示说明相关的知识，希望对你有一定的参考价值。
JS如下：
(function() {
????window.onload = function() {
?
????????// Creating an object literal containing the properties
????????// you want to pass to the map
????????var options = {
????????????zoom: 3,
????????????center: new google.maps.LatLng(37.09, -95.71),
????????????mapTypeId: google.maps.MapTypeId.ROADMAP
????????};
?
????????// Creating the map
????????var map = new google.maps.Map(document.getElementById(‘map‘), options);
?
????????// Creating an array which will contain the coordinates
????????// for New York, San Francisco and Seattle
????????var places = [];
?
????????// Adding a LatLng object for each city
????????places.push(new google.maps.LatLng(40.756, -73.986));
????????places.push(new google.maps.LatLng(37.775, -122.419));
????????places.push(new google.maps.LatLng(47.620, -122.347));
?
????????// Creating a variable that will hold the InfoWindow object
????????var infowindow;
?
????????// Looping through the places array
????????for (var i = 0; i < places.length; i++) {
?
????????????// Adding the markers
????????????var marker = new google.maps.Marker({
????????????????position: places[i],
????????????????map: map,
????????????????title: ‘Place number ‘ + i
????????????});
?
????????????// Wrapping the event listener inside an anonymous function
????????????// that we immediately invoke and passes the variable i to.
????????????(function(i, marker) {
?
????????????????// Creating the event listener. It now has access to the values of
????????????????// i and marker as they were during its creation
????????????????google.maps.event.addListener(marker, ‘click‘, function() {
?
????????????????????if (!infowindow) {
????????????????????????infowindow = new google.maps.InfoWindow();
????????????????????}
?
????????????????????// Setting the content of the InfoWindow
????????????????????infowindow.setContent(‘Place number ‘ + i);
?
????????????????????// Tying the InfoWindow to the marker
????????????????????infowindow.open(map, marker);
?
????????????????});
?
????????????})(i, marker);
?
????????}
?
????};
})();
CSS如下：
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
background: #fff;
}
#map {
width: 100%;
height: 500px;
border: 1px solid #000;
}
.info {
width: 250px;
}
?
html如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My first map</title>
<link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
</head>
<body>
<h1>My first map</h1>
<div id="map"></div>
</body>
</html>
?
效果如下：
以上是关于在Google Maps 上点击标签后显示说明的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Google Maps V3 中永久显示标记的标签/标题？
如何使用 Google Maps Flutter 默认显示地图标签
如何在 Android 上的 Google 地图上的标记旁边显示标签？
Google maps v2 android，信息窗口在点击时没有以默认突出显示颜色突出显示？