标记位置，单击外部链接时

Question

我一直在圈子里跑，我试图在用户点击外部链接时显示正确的标记。仔细阅读一些解决方案，但我无法正常工作。我的想法是将标记存储在一个数组中并在点击时访问它。当我在console.log中时，我得到一个有趣的对象。不确定我是否正确行事。

false

这是我的JavaScript：Fiddle

var markers = new Array(); //array for markers.

markers.push(marker);//push markers to array when function is called.

marker = markers[this.id]; //use markers.

看起来lat / lng工作正常。任何帮助都会很棒，迷失在此。

Answer 1

一个选项是忽略标记（您有HTML中点的坐标）。直接在正确的位置打开信息窗口，设置像素偏移，使其不与标记重叠。

$('.map-trigger').on('click', function(event) {
  event.preventDefault();
  marker = markers[this.id];
  var content = $(this).find('.content').html();
  infoWindow.close();
  infoWindow.setOptions({
    // offset infowindow so doesn't overlap the default marker
    pixelOffset: new google.maps.Size(0, -40)
  });

  infoWindow.setContent(content);
  // position of the marker
  var posn = {
    lat: parseFloat($(this).find('.lat').html()),
    lng: parseFloat($(this).find('.lng').html())
  };
  infoWindow.setPosition(posn);
  infoWindow.open(map);
});

updated fiddle

代码段

$(document).ready(function() {
  var map;
  //map style object.
  var mapStyle = [{
    "stylers": [{
      "saturation": -100
    }, {
      "gamma": 1
    }]
  }, {
    "elementType": "labels.text.stroke",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi.business",
    "elementType": "labels.text",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi.business",
    "elementType": "labels.icon",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi.place_of_worship",
    "elementType": "labels.text",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi.place_of_worship",
    "elementType": "labels.icon",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [{
      "visibility": "simplified"
    }]
  }, {
    "featureType": "water",
    "stylers": [{
      "visibility": "on"
    }, {
      "saturation": 50
    }, {
      "gamma": 0
    }, {
      "hue": "#50a5d1"
    }]
  }, {
    "featureType": "administrative.neighborhood",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#333333"
    }]
  }, {
    "featureType": "road.local",
    "elementType": "labels.text",
    "stylers": [{
      "weight": 0.5
    }, {
      "color": "#333333"
    }]
  }, {
    "featureType": "transit.station",
    "elementType": "labels.icon",
    "stylers": [{
      "gamma": 1
    }, {
      "saturation": 50
    }]
  }];
  //infoWindow options.
  var infoWindow = new google.maps.InfoWindow({
    disableAutoPan: false,
    maxWidth: 450,
    zIndex: 1
  });

  function loadMap() {
    var markers = new Array();
    var mapOptions = {
      center: new google.maps.LatLng(34.746481, -92.289595),
      styles: mapStyle,
      zoom: 12,
      mapTypeControl: false,
      streetViewControl: false,
      zoomControl: true
    };
    //create map.
    var mapId = document.getElementById('map');
    map = new google.maps.Map(mapId, mapOptions);
    console.log(markers)
      //map content creation.
    $('.mapVars').each(function(index, el) {
      var address = $(el).find('.address').html(),
        state = $(el).find('.state').html(),
        country = $(el).find('.country').html(),
        lat = $(el).find('.lat').html(),
        lng = $(el).find('.lng').html(),
        content = $(el).find('.content').html(),
        name = $(el).find('.name').html();
      var fullAdress = address + '<br />' + state;
      //marker creation.
      var newMarker = createMarker(lat, lng, name, content, fullAdress);
    });
    //add marker to map.
    function createMarker(lat, lng, name, content, fullAdress) {
        //create marker options.
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat, lng),
          map: map,
          animation: google.maps.Animation.DROP,
          clickable: true,
          title: name,
          zIndex: 1
        });
        var windowContent = buildHtml(content, name, fullAdress);
        //info window open event.
        google.maps.event.addListener(marker, 'click', function(e) {
          infoWindow.close();
          infoWindow.setContent(windowContent);
          infoWindow.open(map, marker);
        });
        markers.push(marker);
        return marker;
      }
      //infoWindow content.

    function buildHtml(content, name, fullAdress) {
      html = ' '
      html += '<div class=\"info-window\">';
      html += '<div class=\"upper\">';
      html += '<h5>' + name + '</h5>' + fullAdress;
      html += '</div>';
      html += '<div class=\"lower\">';
      html += content;
      html += '</div></div>';
      return html;
    }
    $('.map-trigger').on('click', function(event) {
      event.preventDefault();
      marker = markers[this.id];
      var content = $(this).find('.content').html();
      infoWindow.close();
      infoWindow.setOptions({
        pixelOffset: new google.maps.Size(0, -40)
      });

      infoWindow.setContent(content);
      var posn = {
        lat: parseFloat($(this).find('.lat').html()),
        lng: parseFloat($(this).find('.lng').html())
      };
      infoWindow.setPosition(posn);
      infoWindow.open(map /*,  marker */ );
    });
  }
  google.maps.event.addDomListener(window, 'load', loadMap());
});

#map {
  height: 600px;
}
.info-window {
  h5 {
    margin-bottom: 5px;
  }
  ul {
    margin-top: 5px;
    padding-left: 10px;
    li {
      margin-bottom: 5px;
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="container">


  <div class="row">
    <div class="col-xs-4">


      <a href="#" class="map-trigger">
        <div class="mapVars row">
          <div class="col-md-12" data-page-id="513" data-page-url="/residence_inn_by_marriott">
            <h2 class="name">Residence Inn by Marriott</h2>
            <span class="address">219 River Market Avenue</span>
            <span class="state"> Little Rock Arkansas 72201</span>
            <span class="country"> United States</span>
            <div class="hidden">

              <div class="lat">34.745714</div>

              <div class="lng">-92.265701</div>

              <div class="content">
                <ul>
                  <li><strong>Phone</strong>: 501-376-7200</li>
                  <li><strong>Rates</strong>: Rates from $169</li>
                </ul>
              </div>
            </div>
            <!-- /.hidden -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.vars -->
      </a>


      <a href="#" class="map-trigger">
        <div class="mapVars row">
          <div class="col-md-12" data-page-id="512" data-page-url="/doubletree_hotel">
            <h2 class="name">Doubletree Hotel</h2>
            <span class="address">424 West Markham Street</span>
            <span class="state"> Little Rock Arkansas 72201</span>
            <span class="country"> United States</span>
            <div class="hidden">

              <div class="lat">34.749383</div>

              <div class="lng">-92.273683</div>

              <div class="content">
                <ul>
                  <li><strong>Phone</strong>: 501-372-4371</li>
                  <li><strong>Rates</strong>: Rates from $139-199</li>
                </ul>
              </div>
            </div>
            <!-- /.hidden -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.vars -->
      </a>


      <a href="#" class="map-trigger">
        <div class="mapVars row">
          <div class="col-md-12" data-page-id="511" data-page-url="/little_rock_marriott">
            <h2 class="name">Little Rock Marriott (Headquarters Hotel)</h2>
            <span class="address">3 Statehouse Plaza</span>
            <span class="state"> Little Rock Arkansas 72201</span>
            <span class="country"> United States</span>
            <div class="hidden">

              <div class="lat">34.748623</div>

              <div class="lng">-92.271504</div>

              <div class="content">
                <ul>
                  <li><strong>Phone</strong>: 877-759-6290</li>
                  <li><strong>Rates</strong>: Rates from $149-189</li>
                </ul>
              </div>
            </div>
            <!-- /.hidden -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.vars -->
      </a>


      <a href="#" class="map-trigger">
        <div class="mapVars row">
          <div class="col-md-12" data-page-id="510" data-page-url="/capital_hotel">
            <h2 class="name">Capital Hotel</h2>
            <span class="address">111 West Markham Street</span>
            <span class="state"> Little Rock Arkansas 72201</span>
            <span class="country"> United States</span>
            <div class="hidden">

              <div class="lat">34.747799</div>

              <div class="lng">-92.271275</div>

              <div class="content">
                <ul>
                  <li><strong>Phone</strong>: 870-637-0037, 501-374-7474</li>
                  <li><strong>Rates</strong>: Rates from $190-205</li>
                </ul>
              </div>
            </div>
            <!-- /.hidden -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.vars -->
      </a>

    </div>
    <div class="col-xs-8">
      <div id="map"></div>
    </div>
  </div>
</div>