在Google Map上添加具有標題和位置的多個標記，並使其在單擊時更改圖像

Question

這就是我所擁有的。 當我取消注釋setMarkers函數時，它根本不起作用。 我要添加75個標記，並添加不同的標題和位置，因此我需要一種有效的方法。 此外，每個標記都是可單擊的，並播放音頻文件：

<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

您到處都有JavaScript錯誤。 下面列出：

剩下的評論片段*/ （第170行）
initialize()函數未正確關閉（第181行）
在第138行中調用setMarkers之后聲明了bikers數組（在調用setMarkers之前將數組移動）
setMarkers函數，您引用biker ，這應該是locations

建議您修復所有基本的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