如何通过单击标记单击外部链接

时间:2018-07-16 09:56:57

标签: javascript

我的JavaScript代码宽度有问题。我在中心有一张地图,在右边的地图上有一个列表贴。我想通过单击以单击标记在地图中的链接。。谢谢您的帮助。对不起,我的英语不好。 〜。〜

enter image description here

var listPost = [{
    "long": "21.045366",
    "lat": "105.815885",
    "url": "assets/images/room1.jpg",
    "title": "Place 1",
    "address": "address1",
    "phone": "11111111111111",
    "mail": "mail1@gmail.com",
    "web": "web1.com",
    "images": "assets/images/review1.jpg",
    "note": "1111111111111111111111111Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed",
    "more": "fb.com",
  }, ....
];

// MAP
var map;

function inforObject(item) {
  return resultInfor = '<div class="describe-map">' +
    '<a href="javascript:void(0)" class="return-list">COME BACK</a>' +
    '<div class="title">' + item.title + '</div>' +
    '<p>' + item.address + '</p>' +
    '<p>' + item.phone + '</p>' +
    '<p>' + item.mail + '</p>' +
    '<p>' + item.web + '</p>' +
    '<div class="img"><img src="' + item.images + '" alt=""></div>' +
    '<p>About</p>' +
    '<p>' + item.note + '</p>' +
    '<a href="' + item.more + '">MORE+</a>' +
    '</div> ';
}

function noteObject(item) {
  return resultNote = '<div class="square-marker">' +
    '<p>' + item.title + '</p>' +
    '<img src="' + item.url + '" class="" >' +
    '<p>' + item.note + '</p>' +
    '</div>';
}

var resultList = '';

function listObject(item) {
  return resultList += '<div class="square marginT20">' +
    '<a href="javascript:google.maps.event.addListener(beachMarker, "click", function() {})"  class = "img"><img src="' + item.url + '" alt=""></a>' +
    '<div class="note">' +
    '<p>' + item.phone + '</p>' +
    '<p>' + item.mail + '</p>' +
    '<p>' + item.web + '</p>' +
    '</div>' +
    '</div>';
}

function initMap() {
  map = new google.maps.Map($('.map')[0], {
    zoom: 16,
    center: new google.maps.LatLng(21.0385529, 105.8134563),
    mapTypeId: 'roadmap',

  });

  listPost.forEach(function(item) {
    var beachMarker = new RichMarker({
      position: new google.maps.LatLng(item.long, item.lat),
      map: map,
      content: '<div class = "marker"> <div class ="marker-img"><img class = "img" src="' + item.url + '" alt=""></div></div>',
    });

    listObject(item);
    $('.list-product').html(resultList);

    google.maps.event.addListener(beachMarker, 'click', function() {
      inforObject(item);
      noteObject(item);

      var infowindow = new google.maps.InfoWindow({
        content: resultNote,
        pixelOffset: new google.maps.Size(0, -40)
      });

      infowindow.open(map, beachMarker);
      map.setCenter(beachMarker.getPosition());

      $('.describe-map-arround').html(resultInfor);
      $('.describe-map').hide();
      $('.describe-map').show("slide", {
        direction: "left"
      }, 500);
      $('.list-product').hide();
    });
  });
};

initMap();

$('body').on('click', '.return-list', function() {
  $('.describe-map').hide();
  $('.list-product').show();
});

我的JavaScript代码宽度有问题。我在中心有一张地图,在右边的地图上有一个列表贴。我想通过单击以单击标记在地图中的链接。。谢谢您的帮助。对不起,我的英语不好。 〜。〜

0 个答案:

没有答案