Question

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

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

说我的地图上有很多这些标记。你将鼠标悬停在一个上面。您悬停的那个以及与该标记相关联的第二个标记（与同一个人相关联）会突出显示。

理论上你会怎么做？

Answer 1

我有一个例子，想法是保留一个对象（哈希）或各种人的数组，并在创建标记时，分配它所属的人（marker.owner）。稍后选择它时，检索其标记，并从此信息中更改其他标记。下面的代码可以缩短，但是它的展开方式可以逐步显示正在发生的事情。

<!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>

Answer 2

这是一种使用所有MVCObject的内置bindTo方法的不同方法。这不需要散列来跟踪哪些标记彼此属于。

在标记对的鼠标悬停事件中，您只需将某个属性设置为true，并在mouseout上将其设置为false。然后通过此属性将标记绑定在一起，并使用此属性的change事件来设置图标。

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>

链接标记在一起？

2 个答案: