在Google Map上添加具有标题和位置的多个标记，并使其在单击时更改图像

Question

Here is what I have. 这就是我所拥有的。 It doesn't work at all when I uncomment the setMarkers function. 当我取消注释setMarkers函数时，它根本不起作用。 I have 75 markers to add with different titles and positions so I need an efficient way to do this. 我要添加75个标记，并添加不同的标题和位置，因此我需要一种有效的方法。 Also, each marker is clickable and plays an audio file: 此外，每个标记都是可单击的，并播放音频文件：

<html>
<head>
<title>BIKE BOX ARCHIVE</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://mm1.ellieirons.com/sm2.js"></script>// javascript to play audio
<script>
var map;
var brooklyn = new google.maps.LatLng( 40.710431,-73.968432); //pos. map centers to

function initialize() {
 //



  var stylez = [
   // styling the google map

  {
    featureType: "water",
    stylers: [
      { visibility: "on" },
      { saturation: 89 },
      { hue: "#00c3ff" },
      {lightness: -50}
    ]
  },

  {
    featureType: "administrative.neighborhood",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },

  {
    featureType: "road.highway",
    stylers: [
      { visibility: "on" },
      { hue: "#00b2ff" }
    ]
  },

    {
    featureType: "road.arterial",
    stylers: [
      { visibility: "on" },
      { hue: "#00b2ff" },
      { saturation: 62 },
      {lightness: 30}


    ]
  },

  {
    featureType: "road.local",
    stylers: [
      { visibility: "on" },
      { hue: "#00b2ff" },
      { saturation: 62 },
      {lightness: -10}


    ]
  },
    {
    featureType: "poi",
    stylers: [
     { visibility: "on" },
      { hue: "#00fff7" },
      {lightness: 50}


    ]
  },



    {
    featureType: "poi.park",
    stylers: [
     { visibility: "on" },
      { hue: "#00fff7" },
      {lightness: 0}


    ]
  },

    {
      featureType: "landscape",
      elementType: "geometry",
      stylers: [
       { visibility: "on" },
      { saturation: 59 },
      { hue: "#00cbff" }
      ]
    }
  ];



  var mapOptions = {
    zoom:14,
    center: brooklyn,
    mapTypeControlOptions: {
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'bestfromgoogle']
    },
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    }
     };

  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);



      var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);// adds a layer for the bike routes

  var styledMapOptions = {
      name: "Bike Box"
  }

  var jayzMapType = new google.maps.StyledMapType(
      stylez, styledMapOptions);

  map.mapTypes.set('bestfromgoogle', jayzMapType);
  map.setMapTypeId('bestfromgoogle');




setMarkers(map, bikers);

  var bikers = [
        ['Devotion Gallery', 40.710431,-73.948432, 4],

        ];


function setMarkers(map, locations) {   
 var newimage = 'biker_click.png';
//var image = 'biker.png';

  var image = new google.maps.MarkerImage('biker.png');


for (var i = 0; i < locations.length; i++) {
         var marker = new google.maps.Marker({
            icon: image,
             position: new google.maps.LatLng(biker[i][1], biker[i][2]),
            title: biker[i][0],
            zIndex: biker[i][3]
         });

}
google.maps.event.addListener(marker[i], 'click', function() {
 marker(i).setIcon(newimage),
  sm2.play('http://mm1.ellieirons.com/wp-content/uploads/2012/03/beeps_bubbles.mp3');
});

google.maps.event.addListener(marker[i], 'mouseout', function() {
 marker1.setIcon(image)
});
*/
 google.maps.event.addListener(map, 'center_changed', function() {
          // 3 seconds after the center of the map has changed, pan back to the
          // marker.
          window.setTimeout(function() {
            map.panTo(brooklyn);
          }, 2000);
        });


}

</script>
<link href="BIKEMAP.css" rel="stylesheet" type="text/css">
<style type="text/css">
#bodyContent {
    font-size: 10px;
    font-weight: normal;
    color: #000;
}
</style>
</head>
<body onLoad="initialize()">
 <div id="map_canvas" style="width: 1000px; height: 600px;"> </div>
</body>
</html>

Answer 1

You have JavaScript errors all over the place. 您到处都有JavaScript错误。 Listed below: 下面列出：

Left over commenting snippet */ (line 170) 剩下的评论片段*/ （第170行）
initialize() function is not properly closed (line 181) initialize()函数未正确关闭（第181行）
bikers array is declared after you call setMarkers in line 138 (move the array before the call to setMarkers) 在第138行中调用setMarkers之后声明了bikers数组（在调用setMarkers之前将数组移动）
setMarkers function, you reference biker , this should be locations setMarkers函数，您引用biker ，这应该是locations

Suggest you fix all of the basic JS errors and use the Chrome dev tools to troubleshoot before posting again. 建议您修复所有基本的JS错误，并在再次发布之前使用Chrome开发工具进行故障排除。

在Google Map上添加具有标题和位置的多个标记，并使其在单击时更改图像

问题描述

1 个解决方案

解决方案1
0 2012-06-12 00:46:25

在Google Map上添加具有标题和位置的多个标记，并使其在单击时更改图像

问题描述

1 个解决方案

解决方案1 0 2012-06-12 00:46:25

解决方案1
0 2012-06-12 00:46:25