Java Google Maps JS API v3-标记群集器/标记图标/信息窗口_Java_Javascript_Jquery_Api_Google Maps Api 3

Java Google Maps JS API v3-标记群集器/标记图标/信息窗口

java javascript jquery api google-maps-api-3

Java Google Maps JS API v3-标记群集器/标记图标/信息窗口,java,javascript,jquery,api,google-maps-api-3,Java,Javascript,Jquery,Api,Google Maps Api 3,在开始之前，让我解释一下，我是Javascript和GoogleMapsAPI的新手，所以我要问的问题对于那些知识渊博、经验丰富的脚本编写人员来说可能非常简单！基本上，我已经开始写一个脚本，在英国地图上显示多个标记。我想我已经找到了一种方法来完成当前的脚本，但是我还想添加marker clusterer函数，以便将某个距离内的点聚集在一起，此外还要将marker图标更改为我保存在文件中的图像。最后，除了添加点，我还想为每个标记添加一个信息窗口。此窗口需要能够显示图像和文本如果有人可以帮忙，

在开始之前，让我解释一下，我是Javascript和GoogleMapsAPI的新手，所以我要问的问题对于那些知识渊博、经验丰富的脚本编写人员来说可能非常简单！基本上，我已经开始写一个脚本，在英国地图上显示多个标记。我想我已经找到了一种方法来完成当前的脚本，但是我还想添加marker clusterer函数，以便将某个距离内的点聚集在一起，此外还要将marker图标更改为我保存在文件中的图像。最后，除了添加点，我还想为每个标记添加一个信息窗口。此窗口需要能够显示图像和文本

如果有人可以帮忙，也许可以调整我的脚本，包括上面列出的所有内容，我会非常感激

这个脚本最终也将被放大，以包括1000多个标记，因此如果有人能够提供帮助，他们也可以添加一个注释，说明我将在何处包括图标的图像文件/在我添加到每个标记时，新的信息窗口脚本将在何处，那么它将是超级的

这是我目前拥有的脚本：

 <!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script>
</head> 
<body>
<div id="map" style="width: 1000px; height: 800px;"></div>

<script type="text/javascript">
var locations = [
  ['1', 53.682401, -1.498260, 4],
  ['2', 53.681844, -1.496072, 5],
  ['4', 53.690408, -1.628518, 2],
  ['5', 53.713762, -1.632297, 1],
  ['6', 50.466238, -3.528505, 1],
  ['7', 50.435496, -3.566492, 1],
  ['8', 50.546012, -3.496630, 1],
  ['9', 50.529788, -3.611082, 1],
  ['10', 50.620188, -3.411804, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 6,
  center: new google.maps.LatLng(54.664097, -2.752708),
  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));
 }
 </script>
</body>
</html>

提前谢谢

//array to store the markers - to cluster them
var markers = [];
// i have added an image to each marker
var locations = [
  ['1', 53.682401, -1.498260, 4, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['2', 53.681844, -1.496072, 5, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['4', 53.690408, -1.628518, 2, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['5', 53.713762, -1.632297, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['6', 50.466238, -3.528505, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['7', 50.435496, -3.566492, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['8', 50.546012, -3.496630, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['9', 50.529788, -3.611082, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['10', 50.620188, -3.411804, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png']
];

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

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,
   icon: locations[i][4]
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        var infowindow = new google.maps.InfoWindow();
        infowindow.setContent('marker number: ' +locations[i][0] +'<br/><IMG SRC=" '+locations[i][4] +'">');
        infowindow.open(map, marker);
    }
  })(marker, i));

// add marker to array
 markers.push(marker);   
 }
// create cluster
var markerCluster = new MarkerClusterer(map, markers);

更新小提琴：

文件：

哇，太棒了，谢谢你！尽管您能否解释一下我如何为每个标记创建一个信息窗口，这样我就可以在其中放置我自己的可编辑文本，甚至图像，而不是说“标记编号x”

我已经输入了一些文本，我认为它会在脚本这一部分的1、2、3等之后：

var locations = [
['1', 53.682401, -1.498260, 4, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],

然而，它只是在信息窗口上显示“标记号：输入文本”

再次感谢你的帮助，你帮了我很大的忙

哇，太棒了，谢谢你！尽管您能否解释一下我如何为每个标记创建一个信息窗口，这样我就可以在其中放置我自己的可编辑文本，甚至图像，而不是说“标记编号x”？我已经输入了一些文本，我认为它会在脚本这一部分的1、2、3等之后：var locations=[['1'，53.682401，-1.498260，4'，但它在信息窗口上只显示“标记号：输入的文本”。欢迎-代码已更新，现在每次单击标记时，都会使用位置数组中的数据创建一个新的信息窗口。我使用标记号和图像在信息窗口中显示，表示位置[0]和[4]。