2

addListenerGoogleマップ上のマーカーのクリックメソッドがあります(setMarkers関数内):

var infowindow = null;

$(document).ready(function () { initialize();  });

function initialize() {

    var centerMap = new google.maps.LatLng(39.828175, -98.5795);

    var myOptions = {
        zoom: 4,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });

    var bikeLayer = new google.maps.BicyclingLayer();
    bikeLayer.setMap(map);
}

var sites = [
    ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];



function setMarkers(map, markers) {
    var myContentDiv = document.getElementById('myDivID');//Reference to you DOM elem  

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4]
        });

        var contentString = "Some content";
        //marker.xtraData = 'SomeExtraData';//You can even add more data this way

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            var myTemplate = '<h1>'+this.title+'<h1><p>'+this.html+'</p>';

            myContentDiv.innerHTML = myTemplate;//Inset this html inside link
            //infowindow.setContent(this.html);
            //infowindow.open(map, this);
        });
    }
}

私がやろうとしているのは、「アクティブ」マーカーを別の画像に変更することです。私はgoogle.maps.MarkerImageクラスを見ましたが、これまでのすべての試行で "a" マーカー (選択したものではない) を URL に置き換えましたが、次のクリックでマーカーが通常の状態に戻りません (または情報ボックスを閉じます)。私はかなり近づいているように感じますが、現時点では泥の中でかなり立ち往生しています. どんな助けでも大歓迎です。ありがとう！

4

1 に答える 1

4

これが私の例です（Mike Williamsのv2チュートリアルから移植）：

http://www.geocodezip.com/v3_MW_example_hoverchange.html

それを行う1つの方法（最後の質問のjsfiddle、更新）： http://jsfiddle.net/geocodezip/r7fu3a1y/1/

作業コードスニペット:

var infowindow = null;
var gmarkers = [];

var defaultIcon = {
  url: 'http://maps.google.com/mapfiles/ms/micons/red-dot.png',
  // This marker is 32 pixels wide by 32 pixels tall.
  size: new google.maps.Size(32, 32),
  // The origin for this image is 0,0.
  origin: new google.maps.Point(0, 0),
  // The anchor for this image is the base of the flagpole at 0,32.
  anchor: new google.maps.Point(16, 32)
};

var activeIcon = {
  url: 'http://maps.google.com/mapfiles/ms/micons/yellow-dot.png',
  // This marker is 20 pixels wide by 32 pixels tall.
  size: new google.maps.Size(32, 32),
  // The origin for this image is 0,0.
  origin: new google.maps.Point(0, 0),
  // The anchor for this image is the base of the flagpole at 0,32.
  anchor: new google.maps.Point(16, 32)
};
// Shapes define the clickable region of the icon.
// The type defines an HTML &lt;area&gt; element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
  coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
  type: 'poly'
};

$(document).ready(function() {
  initialize();
});

function initialize() {

  var centerMap = new google.maps.LatLng(39.828175, -98.5795);

  var myOptions = {
    zoom: 4,
    center: centerMap,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

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

  setMarkers(map, sites);
  infowindow = new google.maps.InfoWindow({
    content: "loading..."
  });

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);
}

var sites = [
  ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
  ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
  ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
  ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];



function setMarkers(map, markers) {

  for (var i = 0; i < markers.length; i++) {
    var sites = markers[i];
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
    var marker = new google.maps.Marker({
      position: siteLatLng,
      map: map,
      title: sites[0],
      icon: defaultIcon,
      zIndex: sites[3],
      html: sites[4]
    });

    var contentString = "Some content";

    google.maps.event.addListener(marker, "click", function() {
      //alert(this.html);
      for (var i = 0; i < gmarkers.length; i++) {
        gmarkers[i].setIcon(defaultIcon);
      }
      this.setIcon(activeIcon);
      infowindow.setContent(this.html);
      infowindow.open(map, this);
    });
    gmarkers.push(marker);
  }
}
#map_canvas {
  width: 600px;
  height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<h1>Map</h1>
<div id="map_canvas"></div>

于 2012-10-04T13:18:27.313 に答える