google-maps - 将标记链接在一起？

Question

你能以某种方式引用标记内的其他标记吗？将标记链接在一起，即使它们在地图上的位置不同。

假设我对每个人都有两种类型的标记：第一个标记是该人居住的位置，第二个标记是该人工作的位置。

假设我的地图上有很多这样的标记。您将鼠标悬停在一个上。您将鼠标悬停在上面的那个和链接到该标记（与同一个人关联）的第二个标记被突出显示。

理论上你会怎么做？

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

这是一种不同的方法，它使用所有 MVCObjects 的内置bindTo方法。这不需要哈希来跟踪哪些标记属于彼此。

在标记对的鼠标悬停事件中，您只需将某些属性设置为 true，然后将其设置为 false on 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