0

これが私が持っているものです。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>
4

1 に答える 1

0

いたるところに JavaScript エラーがあります。以下に記載されています：

  • 残りのコメント スニペット*/(170 行目)
  • initialize()関数が適切に閉じられていません (181 行目)
  • bikers配列は、138 行目で setMarkers を呼び出した後に宣言されます (setMarkers への呼び出しの前に配列を移動します)。
  • setMarkers 関数、あなたが参照するbiker、これはlocations

再度投稿する前に、基本的な JS エラーをすべて修正し、Chrome 開発ツールを使用してトラブルシューティングを行うことをお勧めします。

于 2012-06-12T00:46:25.720 に答える