关于javascript:google maps js api v3-简单的多标记示例

Google Maps JS API v3 - Simple Multiple Marker Example

对于谷歌地图API来说，这是一个相当新的概念。我有一个数据数组，我想循环并在地图上绘图。看起来相当简单，但是我发现的所有多标记教程都非常复杂。

让我们以谷歌网站上的数据数组为例：

1
2
3
4
5
6
7

我只想绘制所有这些点，并在单击以显示名称时弹出一个信息窗口。

这是我能将其简化为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Google Maps Multiple Markers
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript">
</head>
<body>

<script type="text/javascript">
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

</body>
</html>

截图：

Google Maps Multiple Markers

当将回调参数传递给addListener方法时，会发生一些闭包魔术。如果您不熟悉闭包是如何工作的，那么这可能是一个非常棘手的主题。如果是这样的话，我建议您查看下面的Mozilla文章进行简要介绍：

Mozilla开发中心：使用闭包

相关讨论

这里是另一个例子，多个标记加载一个独特的title和infoWindow文本。使用最新的谷歌地图API v3.11进行测试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Multiple Markers Google Maps
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
<script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript">
<script type="text/javascript">
// check DOM Ready
$(document).ready(function() {
// execute
(function() {
// map options
var options = {
zoom: 5,
center: new google.maps.LatLng(39.909736, -98.522109), // centered US
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false
};

// init map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);

// NY and CA sample Lat / Lng
var southWest = new google.maps.LatLng(40.744656, -74.005966);
var northEast = new google.maps.LatLng(34.052234, -118.243685);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();

// set multiple marker
for (var i = 0; i < 250; i++) {
// init markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
map: map,
title: 'Click Me ' + i
});

// process multiple info windows
(function(marker, i) {
// add click event
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({
content: 'Hello, World!!'
});
infowindow.open(map, marker);
});
})(marker, i);
}
})();
});

</head>
<body>

</body>
</html>

250个标记的屏幕截图：

Google Maps API V3.11 with Multiple Markers

它将自动随机化lat/lng，使其独一无二。如果您想测试500、1000、XXX标记和性能，这个例子将非常有用。

相关讨论

我想我会把它放在这里，因为它似乎是开始使用谷歌地图API的人的一个流行的着陆点。在客户端呈现的多个标记可能是许多地图应用程序性能方面的下降。很难对其进行基准测试、修复，而且在某些情况下甚至确定存在问题(由于浏览器实现的差异、客户机可用的硬件、移动设备等原因，清单还在继续)。

开始解决这个问题的最简单方法是使用标记集群解决方案。其基本思想是将地理上相似的位置分组成一组，显示点的数量。当用户放大地图时，这些组会展开以显示下面的单个标记。

也许最简单的实现是markerclusterer库。基本实现如下(在库导入之后)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

标记(而不是直接添加到地图)将添加到数组中。然后这个数组被传递给库，库为您处理复杂的计算，并附加到地图上。

这些实现不仅极大地提高了客户端的性能，而且在许多情况下还导致了一个更简单、更少混乱的UI，以及更大范围上更容易地消化数据。

谷歌还提供了其他实现。

希望这对地图的细微差别有帮助。

相关讨论

异步版本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

This is the working example map image

完整的工作示例。你只需复制、粘贴和使用。

来自Google地图API示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

相关讨论

这是我编写的另一个保存地图不动产的版本，它将信息窗口指针放在标记的实际lat和long上，同时在显示信息窗口时临时隐藏标记。

它还取消了标准的"标记"分配，并加快了速度通过在标记创建时直接将新标记分配给标记数组进行处理。但是请注意，标记和信息窗口中都添加了其他属性，所以这种方法有点非常规…但那就是我！

在这些信息窗口问题中从未提到，标准信息窗口不是放置在标记点的lat和lng处，而是放置在标记图像的顶部。必须隐藏标记可见性才能使其正常工作，否则地图API将再次将信息窗口锚推回到标记图像的顶部。

对"标记"数组中标记的引用将在标记声明后立即为以后可能需要的任何其他处理任务(隐藏/显示、获取坐标等)创建。这将保存将标记对象分配给"marker"的附加步骤，然后将"marker"推送到标记数组…在我的书中有很多不必要的处理。

不管怎样，对信息窗口采取不同的态度，希望它能帮助您了解并激发您的灵感。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

这是一个正在工作的J小提琴

附加注释在这个给定的Google示例数据中，您会注意到在"locations"数组中有一个数字排在第四位。在本例中给出了这一点，您还可以将该值用于标记ID而不是当前循环值，这样…

1
2
3
4
5
6
7
8
9

接受答案，在ES6中重写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

$(document).ready(() => {
const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');

// Display a map on the page
const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });

const buildings = [
{
title: 'London Eye, London',
coordinates: [51.503454, -0.119562],
info: 'carousel'
},
{
title: 'Palace of Westminster, London',
coordinates: [51.499633, -0.124755],
info: 'palace'
}
];

placeBuildingsOnMap(buildings, map);
});

const placeBuildingsOnMap = (buildings, map) => {
// Loop through our array of buildings & place each one on the map
const bounds = new google.maps.LatLngBounds();
buildings.forEach((building) => {
const position = { lat: building.coordinates[0], lng: building.coordinates[1] }
// Stretch our bounds to the newly found marker position
bounds.extend(position);

const marker = new google.maps.Marker({
position: position,
map: map,
title: building.title
});

const infoWindow = new google.maps.InfoWindow();
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', () => {
infoWindow.setContent(building.info);
infoWindow.open(map, marker);
})

// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
})
})

在程序中添加标记非常简单。您只需添加以下代码：

1
2
3
4
5

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});

以下字段特别重要，通常在构造标记时设置：

position(必需)指定标识标记初始位置的闭锁。检索闭锁的一种方法是使用地理编码服务。
map(可选)指定放置标记的地图。如果未在标记的构造上指定地图，则会创建标记，但该标记不会附着到地图(或显示在地图上)。稍后可以通过调用标记的setMap()方法添加标记。

注意，在示例中，"标题"字段设置将显示为工具提示的标记标题。

你可以在这里查阅谷歌API文档。

这是在地图中设置一个标记的完整示例。请小心，您必须用您的Google API密钥替换YOUR_API_KEY：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
Simple markers
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>

function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

现在，如果要在地图中绘制数组的标记，应该这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

这个例子给出了以下结果：

enter image description here

您也可以在您的PIN中添加一个信息窗口。您只需要以下代码：

1
2
3
4
5
6
7
8

var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});

marker.info = new google.maps.InfoWindow({
content: 'Hello World!'
});

你可以在这里找到谷歌关于信息窗口的文档。

现在，我们可以在标记为"clik"时打开信息窗口，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意，您可以在Google Developer中获得有关Listener的一些文档。

最后，如果用户单击标记，我们可以在标记中绘制一个信息窗口。这是我的完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
Info windows
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>

var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];

// When the user clicks the marker, an info window opens.

function initMap() {
var myLatLng = {lat: -33.90, lng: 151.16};

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: myLatLng
});

var count=0;

for (count = 0; count < locations.length; count++) {

var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});

marker.info = new google.maps.InfoWindow({
content: locations [count][0]
});

google.maps.event.addListener(marker, 'click', function() {
// this = marker
var marker_map = this.getMap();
this.info.open(marker_map, this);
// Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});
}
}

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

</body>
</html>

通常，您应该得到以下结果：

Your result

源链接

演示链接

完整的HTML代码

单击或悬停时显示信息窗口。
只显示一个信息窗口

enter image description here

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

<!DOCTYPE html>
<html>

<head>
<style>
/* <span class="metadata-marker" style="display: none;" data-region_tag="css"></span> Set the size of the div element that contains the map */
#map {
height: 400px;
/* The height is 400 pixels */
width: 100%;
/* The width is the width of the web page */
}
</style>

var map;
var InforObj = [];
var centerCords = {
lat: -25.344,
lng: 131.036
};
var markersOnMap = [{
placeName:"Australia (Uluru)",
LatLng: [{
lat: -25.344,
lng: 131.036
}]
},
{
placeName:"Australia (Melbourne)",
LatLng: [{
lat: -37.852086,
lng: 504.985963
}]
},
{
placeName:"Australia (Canberra)",
LatLng: [{
lat: -35.299085,
lng: 509.109615
}]
},
{
placeName:"Australia (Gold Coast)",
LatLng: [{
lat: -28.013044,
lng: 513.425586
}]
},
{
placeName:"Australia (Perth)",
LatLng: [{
lat: -31.951994,
lng: 475.858081
}]
}
];

window.onload = function () {
initMap();
};

function addMarkerInfo() {
for (var i = 0; i < markersOnMap.length; i++) {
var contentString = '' + markersOnMap[i].placeName +
'<p>
Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.
</p>';

const marker = new google.maps.Marker({
position: markersOnMap[i].LatLng[0],
map: map
});

const infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});

marker.addListener('click', function () {
closeOtherInfo();
infowindow.open(marker.get('map'), marker);
InforObj[0] = infowindow;
});
// marker.addListener('mouseover', function () {
// closeOtherInfo();
// infowindow.open(marker.get('map'), marker);
// InforObj[0] = infowindow;
// });
// marker.addListener('mouseout', function () {
// closeOtherInfo();
// infowindow.close();
// InforObj[0] = infowindow;
// });
}
}

function closeOtherInfo() {
if (InforObj.length > 0) {
/* detach the info-window from the marker ... undocumented in the API docs */
InforObj[0].set("marker", null);
/* and close it */
InforObj[0].close();
/* blank the array */
InforObj.length = 0;
}
}

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: centerCords
});
addMarkerInfo();
}

</head>

<body>
My Google Maps Demo


<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">

</body>

</html>

下面是一个几乎完整的示例javascript函数，它允许在JSONObject中定义多个标记。

它将只显示地图边界中的标记。

这很重要，所以你不用做额外的工作。

您还可以设置标记的限制，这样您就不会显示大量标记(如果在您的使用中可能存在某种情况)；

如果地图中心的变化不超过500米，它也不会显示标记。这一点很重要，因为如果用户在执行此操作时单击标记并意外拖动地图，则不希望地图重新加载标记。

我将此函数附加到映射的空闲事件侦听器，以便标记仅在映射空闲时显示，并在其他事件后重新显示标记。

动作画面截图在信息窗口中显示更多内容的屏幕截图有一点变化。 enter image description here 粘贴自pastbin.com

1	<script src="//pastebin.com/embed_js/uWAbRxfg">

根据DanielVassallo的回答，这里有一个以更简单的方式处理关闭问题的版本。

因为所有标记都有一个单独的信息窗口，而且由于javascript不关心是否向对象添加额外的属性，所以您需要做的就是向标记的属性添加一个信息窗口，然后从它本身调用信息窗口上的.open()！

编辑：有了足够的数据，页面加载可能需要很多时间，因此与其用标记构建信息窗口，还不如只在需要时进行构造。请注意，用于构造信息窗口的任何数据都必须作为属性附加到标记(data)。另外请注意，在第一次单击事件之后，infoWindow将作为其标记的属性持续存在，因此浏览器不需要不断地重新构造。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29