google-maps - マーカーをリンクしますか？

Question

マーカー内の他のマーカーをどういうわけか参照できますか？マップ上の場所が異なっていても、マーカーをリンクします。

たとえば、人ごとに2種類のマーカーがあるとします。1番目のマーカーはその人が住んでいる場所であり、2番目のマーカーはその人が働いている場所です。

私の地図にこれらのマーカーがたくさんあるとしましょう。1つにカーソルを合わせます。カーソルを合わせたものと、そのマーカーにリンクされている（同じ人物に関連付けられている）2番目のマーカーが強調表示されます。

理論的にはどうしますか？

score 2 · Accepted Answer

例があります。アイデアは、さまざまな人々のオブジェクト（ハッシュ）または配列を保持し、マーカーを作成するときに、それが誰に属するかを割り当てることです（marker.owner）。後でそれが選択されたときに、それが誰のマーカーであるかを取得し、この情報から他のマーカーを変更します。以下のコードは短縮できますが、開いたままにしておくと、何が起こっているのかを段階的に確認できます。

http://jsfiddle.net/afTLh/

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
      var mapOptions = { center: new google.maps.LatLng(40.0, -90.0), zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP };

      var people = {};

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        addPerson("Joe",40,-88,41,-86);
        addPerson("Tina",42,-92,43,-93);
        addPerson("Ken",39,-94,39.5,-96);
      }

      function addPerson(name, homelat, homelng, worklat, worklng) {
        people[name] = {};

        homemarker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(homelat, homelng),
          icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
        });

        workmarker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(worklat, worklng),
          icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
        });

        homemarker.owner = name;
        workmarker.owner = name;

        google.maps.event.addListener(homemarker, 'mouseover', function() {
          var name = this.owner;
          this.setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
          people[name].work.setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
        });

        google.maps.event.addListener(homemarker, 'mouseout', function() {
          var name = this.owner;
          this.setIcon("http://labs.google.com/ridefinder/images/mm_20_green.png");
          people[name].work.setIcon("http://labs.google.com/ridefinder/images/mm_20_blue.png");
        });


        google.maps.event.addListener(workmarker, 'mouseover', function() {
          var name = this.owner;
          this.setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
          people[name].home.setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
        });

        google.maps.event.addListener(workmarker, 'mouseout', function() {
          var name = this.owner;
          this.setIcon("http://labs.google.com/ridefinder/images/mm_20_blue.png");
          people[name].home.setIcon("http://labs.google.com/ridefinder/images/mm_20_green.png");
        });

        people[name].home = homemarker;
        people[name].work = workmarker;
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

score 1 · Accepted Answer

bindToこれは、すべてのMVCObjectの組み込みメソッドを使用する別のアプローチです。これには、どのマーカーが互いに属しているかを追跡するためのハッシュは必要ありません。

マーカーペアのマウスオーバーイベントでは、いくつかのプロパティをtrueに設定し、でfalseに設定しますmouseout。次に、このプロパティでマーカーをバインドし、このプロパティの変更イベントを使用してアイコンを設定します。

http://jsfiddle.net/afTLh/1/

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
      var mapOptions = { center: new google.maps.LatLng(40.0, -90.0), zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP };

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        addPerson("Joe",40,-88,41,-86);
        addPerson("Tina",42,-92,43,-93);
        addPerson("Ken",39,-94,39.5,-96);
      }

      function addPerson(name, homelat, homelng, worklat, worklng) {

        homemarker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(homelat, homelng),
          icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
        });

        workmarker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(worklat, worklng),
          icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
        });

        google.maps.event.addListener(homemarker, 'mouseover', function() {
            this.set('current', true);
        });

        google.maps.event.addListener(homemarker, 'mouseout', function() {
            this.set('current', false);
        });


        google.maps.event.addListener(workmarker, 'mouseover', function() {
            this.set('current', true);
        });

        google.maps.event.addListener(workmarker, 'mouseout', function() {
            this.set('current', false);
        });

        //Use the 'current_changed' event to set the correct markers
        google.maps.event.addListener(workmarker, 'current_changed', function() {
            if(this.get('current')){
                this.setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
            }else{
                this.setIcon("http://labs.google.com/ridefinder/images/mm_20_blue.png");
            }
        });

        google.maps.event.addListener(homemarker, 'current_changed', function() {
            if(this.get('current')){
                this.setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
            }else{
                this.setIcon("http://labs.google.com/ridefinder/images/mm_20_green.png");
            }
        });

        //Bind the markers together by the 'current' property
        homemarker.bindTo('current', workmarker);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

google-maps - マーカーをリンクしますか？

2 に答える 2

Related

Reference