使用数组将多个自定义标记添加到Google地图 [英] Adding multiple custom markers to a google map using an array

问题描述

我目前正在为我的网站实施Google地图，并偶然发现了一个很棒的教程这里几乎让我到了应许的土地。不过，我还有一件功能需要添加。在我的数组中，我想在我的地图上显示三种不同的自定义标记之一。有没有人有任何想法？

这是小提琴 ...

var locations = [['Bondi Beach'， - ['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， （i = 0; i

< div id =mapstyle =width：500px; height：400px;>< / div>

解决方案

最简单的解决方案是，将标记所需图标的网址添加到您的数组中：



  var locations = [
 ['Bondi Beach'，-33.890542，151.274856，4，http://maps.google.com/mapfiles/ms/micons /blue.png]，
 ['Coogee Beach'，-33.923036，151.259052，5，http://maps.google.com/mapfiles/ms/micons/green.png]，
 ['Cronulla Beach'，-34.028249,151.157507,3，http://maps.google.com/mapfiles/ms/micons/yellow.png]，
 ['Manly Beach'，-33.80010128657071， 151.28747820854187,2，http： //maps.google.com/mapfiles/ms/micons/blue.png]，
 ['Maroubra Beach'，-33.950198，151.259302，1，http://maps.google.com/mapfiles/ ms / micons / blue.png] 
]; 
  

然后在标记构造函数中使用它：



  marker = new google.maps.Marker（{
 position：new google.maps.LatLng（locations [i] [1]，locations [i] [2]） ，
 icon：locations [i] [4]，
 map：map 
}）; 
  

更新的小提琴

代码段：

  var locations = [['Bondi Beach'，-33.890542，151.274856，4，http://maps.google.com/mapfiles/ms/micons/blue.png]，['Coogee海滩'，-33.923036,151.259052,5，http://maps.google.com/mapfiles/ms/micons/green.png]，['Cronulla Beach'，-34.028249,151.157507,3'，http： /maps.google.com/mapfiles/ms/micons/yellow.png]，['Manly Beach'，-33.80010128657071,151.28747820854187,2]，http://maps.google.com/mapfiles/ms/micons/blue .png]，['Maroubra Beach'，-33.950198,151.259302,1]，http://maps.google.com/mapfiles/ms/micons/blue.png]; var map = new google.maps。地图（document.getElementById（'map'），{zoom：10，center：new google.maps.LatLn g（-33.92,151.25），mapTypeId：google.maps.MapTypeId.ROADMAP}）; var infowindow = new google.maps.InfoWindow（）; var marker，i; for（i = 0;我< locations.length; i ++）{marker = new google.maps.Marker（{position：new google.maps.LatLng（locations [i] [1]，locations [i] [2]），icon：locations [i] [4]，title ：locations [i] [0]，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，＃map {width：100％; height：100％;}

< script src = http://maps.google.com/maps/api/js\"></script><div id =map>< / div>

I'm currently working on implementing a google map for my website and stumbled across a great tutorial here which almost got me to the promised land. However, I have one more piece of functionality I'm looking to add. Inside my array I want display one of three different custom markers on my map. Does anyone have any ideas?

Here's a fiddle...

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));
}

<div id="map" style="width: 500px; height: 400px;"></div>

解决方案

Simplest solution, add the URLs of the desired icons for the markers to your array:

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4, "http://maps.google.com/mapfiles/ms/micons/blue.png"],
    ['Coogee Beach', -33.923036, 151.259052, 5, "http://maps.google.com/mapfiles/ms/micons/green.png"],
    ['Cronulla Beach', -34.028249, 151.157507, 3, "http://maps.google.com/mapfiles/ms/micons/yellow.png"],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, "http://maps.google.com/mapfiles/ms/micons/blue.png"],
    ['Maroubra Beach', -33.950198, 151.259302, 1, "http://maps.google.com/mapfiles/ms/micons/blue.png"]
];

Then use that in the marker constructor:

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

updated fiddle

code snippet:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4, "http://maps.google.com/mapfiles/ms/micons/blue.png"],
  ['Coogee Beach', -33.923036, 151.259052, 5, "http://maps.google.com/mapfiles/ms/micons/green.png"],
  ['Cronulla Beach', -34.028249, 151.157507, 3, "http://maps.google.com/mapfiles/ms/micons/yellow.png"],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, "http://maps.google.com/mapfiles/ms/micons/blue.png"],
  ['Maroubra Beach', -33.950198, 151.259302, 1, "http://maps.google.com/mapfiles/ms/micons/blue.png"]
];

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

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

html,
body,
#map {
  width: 100%;
  height: 100%;
}

<script src="http://maps.google.com/maps/api/js"></script>
<div id="map"></div>

这篇关于使用数组将多个自定义标记添加到Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！