首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >点击"show map“按钮(类似Airbnb)后,如何使特定标记的infobox默认打开?

点击"show map“按钮(类似Airbnb)后,如何使特定标记的infobox默认打开?
EN

Stack Overflow用户
提问于 2019-07-15 03:19:25
回答 1查看 223关注 0票数 -1

我有一张地图,上面有特定区域上所有酒店的标记,当我单击每个标记时,就会显示每个酒店的信息箱。此地图将在模式窗口中打开。

我希望当我在一个特定酒店的页面上,用户点击“查看更大的地图”按钮,该地图将显示与该特定酒店的信息箱默认打开,而不必点击该标记(如airbnb地图)。

我试着用tried或bounds_changed来改变谷歌地图上的点击事件,但是不起作用。Google.maps.event.addListener(标记,‘点击’,(function () {...}));

我也试过了

function onHtmlClick(key){
google.maps.event.trigger(markers[key], "click");
}
<a href="#" class="btn_map location_map_btn properties" data- 
toggle="modal" data-target="#myModal" onclick="onHtmlClick(1)">View Larger 
Map <i class="icon-location-5"></i></a>

但它并没有起作用。

 (function(A) {

if (!Array.prototype.forEach)
    A.forEach = A.forEach || function(action, that) {
        for (var i = 0, l = this.length; i < l; i++)
            if (i in this)
                action.call(that, this[i], i, this);
        };

    })(Array.prototype);

    var
    mapObject,
    markers = [],
    markersData = {
        'Single_hotel': [
        {
            name: 'Villas',
            location_latitude: 37.713490, 
            location_longitude: 20.980900,
            map_image_url: 'img/villas/280.jpg',
            name_point: 'Aeolos Luxury Villas',
            description_point: 'Lorem Ipsum',
            get_directions_start_address: '',
            phone: '+30 2641 085625',
            url_point: 'single_hotel.html'
        },
        {
            name: 'Villas2',
            location_latitude: 37.713490, 
            location_longitude: 20.980900,
            map_image_url: 'img/villas/280.jpg',
            name_point: 'Aeolos Luxury Villas',
            description_point: 'Lorem Ipsum',
            get_directions_start_address: '',
            phone: '+30 2641 085625',
            url_point: 'single_hotel.html'
        }
        ]

    };


        var mapOptions = {
            zoom: 14,
            center: new google.maps.LatLng(37.859490, 20.925600),
            mapTypeId: google.maps.MapTypeId.ROADMAP,

            mapTypeControl: false,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                position: google.maps.ControlPosition.LEFT_CENTER
            },
            panControl: false,
            panControlOptions: {
                position: google.maps.ControlPosition.TOP_RIGHT
            },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.TOP_LEFT
            },
            scrollwheel: false,
            scaleControl: false,
            scaleControlOptions: {
                position: google.maps.ControlPosition.TOP_LEFT
            },
            streetViewControl: true,
            streetViewControlOptions: {
                position: google.maps.ControlPosition.LEFT_TOP
            }
            ]
        };
        var
        marker;
        mapObject = new google.maps.Map(document.getElementById('map_modal'), mapOptions);
        for (var key in markersData)
            markersData[key].forEach(function (item) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
                    map: mapObject,
                    icon: 'img/pins/' + key + '.png',
                });

                if ('undefined' === typeof markers[key])
                    markers[key] = [];
                markers[key].push(marker);
                google.maps.event.addListener(marker, 'click', (function () {
  closeInfoBox();
  getInfoBox(item).open(mapObject, this);
  mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude));
 }));

});

    function hideAllMarkers () {
        for (var key in markers)
            markers[key].forEach(function (marker) {
                marker.setMap(null);
            });
    };

    function closeInfoBox() {
        $('div.infoBox').remove();
    };

    function getInfoBox(item) {
        return new InfoBox({
            content:
            '<div class="marker_info" id="marker_info">' +
            '<img src="' + item.map_image_url + '" alt="Image"/>' +
            '<h3>'+ item.name_point +'</h3>' +
            '<span>'+ item.description_point +'</span>' +
            '<div class="marker_tools">' +
            '<form action="http://maps.google.com/maps" method="get" target="_blank" style="display:inline-block""><input name="saddr" value="'+ item.get_directions_start_address +'" type="hidden"><input type="hidden" name="daddr" value="'+ item.location_latitude +',' +item.location_longitude +'"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Directions</button></form>' +
                '<a href="tel://'+ item.phone +'" class="btn_infobox_phone">'+ item.phone +'</a>' +
                '</div>' +
                '<a href="'+ item.url_point + '" class="btn_infobox">Details</a>' +
            '</div>',
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(10, 125),
            closeBoxMargin: '5px -20px 2px 2px',
            closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
            isHidden: false,
            alignBottom: true,
            pane: 'floatPane',
            enableEventPropagation: true
        });


    };
 <!-- Button to Open the Modal -->
                <a href="#" class="btn_map location_map_btn properties" data-toggle="modal" data-target="#myModal" onclick="onHtmlClick(1)">View Larger Map <i class="icon-location-5"></i></a>


  <!-- The Modal map-->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Search By Map</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          <div id="map_modal" class="map"></div>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn_map location_map_btn properties" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>    
<!-- End modal map -->
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-15 08:56:53

您的“标记数组”是一个具有键"Single_villas“的对象,然后是该属性中的一个google.maps.Markers数组。要在单个标记上触发单击事件,您的onHtmlClick函数需要如下所示:

function onHtmlClick(key,key2) {
  google.maps.event.trigger(markers[key][key2], "click");
}

proof of concept fiddle

代码片段:

(function(A) {

  if (!Array.prototype.forEach)
    A.forEach = A.forEach || function(action, that) {
      for (var i = 0, l = this.length; i < l; i++)
        if (i in this)
          action.call(that, this[i], i, this);
    };

})(Array.prototype);

var
  mapObject,
  markers = [],
  markersData = {
    'Single_hotel': [{
        name: 'Villas',
        location_latitude: 37.713490,
        location_longitude: 20.980900,
        map_image_url: 'img/villas/280.jpg',
        name_point: 'Aeolos Luxury Villas 0',
        description_point: 'Lorem Ipsum',
        get_directions_start_address: '',
        phone: '+30 2641 085625',
        url_point: 'single_hotel.html'
      },
      {
        name: 'Villas2',
        location_latitude: 37.713,
        location_longitude: 20.980,
        map_image_url: 'img/villas/280.jpg',
        name_point: 'Aeolos Luxury Villas 1',
        description_point: 'Lorem Ipsum',
        get_directions_start_address: '',
        phone: '+30 2641 085625',
        url_point: 'single_hotel.html'
      }
    ]

  };


var mapOptions = {
  zoom: 14,
  center: new google.maps.LatLng(37.859490, 20.925600),
  mapTypeId: google.maps.MapTypeId.ROADMAP,

  mapTypeControl: false,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    position: google.maps.ControlPosition.LEFT_CENTER
  },
  panControl: false,
  panControlOptions: {
    position: google.maps.ControlPosition.TOP_RIGHT
  },
  zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.TOP_LEFT
  },
  scrollwheel: false,
  scaleControl: false,
  scaleControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT
  },
  streetViewControl: true,
  streetViewControlOptions: {
    position: google.maps.ControlPosition.LEFT_TOP
  }
};
var marker;
var bounds = new google.maps.LatLngBounds();
mapObject = new google.maps.Map(document.getElementById('map_modal'), mapOptions);
for (var key in markersData) {
  markersData[key].forEach(function(item) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
      map: mapObject,
      // icon: 'img/pins/' + key + '.png',
    });
    bounds.extend(marker.getPosition());
    mapObject.fitBounds(bounds);
    if ('undefined' === typeof markers[key])
      markers[key] = [];
    markers[key].push(marker);
    console.log(markers);
    google.maps.event.addListener(marker, 'click', (function() {
      closeInfoBox();
      getInfoBox(item).open(mapObject, this);
      mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude));
    }));
  });
}

function onHtmlClick(key, key2) {
  google.maps.event.trigger(markers[key][key2], "click");
}

function hideAllMarkers() {
  for (var key in markers)
    markers[key].forEach(function(marker) {
      marker.setMap(null);
    });
};

function closeInfoBox() {
  $('div.infoBox').remove();
};

function getInfoBox(item) {
  return new InfoBox({
    content: '<div class="marker_info" id="marker_info" style="border: 1px solid black; margin-top: 8px; background: white; padding: 5px;">' +
      // '<img src="' + item.map_image_url + '" alt="Image"/>' +
      '<h3>' + item.name_point + '</h3>' +
      '<span>' + item.description_point + '</span>' +
      '<div class="marker_tools">' +
      '<form action="http://maps.google.com/maps" method="get" target="_blank" style="display:inline-block""><input name="saddr" value="' + item.get_directions_start_address + '" type="hidden"><input type="hidden" name="daddr" value="' + item.location_latitude + ',' + item.location_longitude + '"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Directions</button></form>' +
      '<br/><a href="tel://' + item.phone + '" class="btn_infobox_phone">' + item.phone + '</a>' +
      '</div>' +
      '<a href="' + item.url_point + '" class="btn_infobox">Details</a>' +
      '</div>',
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(10, 125),
    closeBoxMargin: '5px -20px 2px 2px',
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    isHidden: false,
    alignBottom: true,
    pane: 'floatPane',
    enableEventPropagation: true
  });
};
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 80%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.map {
  height: 400px;
  width: 500px;
}

.marker_info {
  background
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Button to Open the Modal -->
<a href="#" class="btn_map location_map_btn properties" data-toggle="modal" data-target="#myModal" onclick="onHtmlClick('Single_hotel',0)">View Larger Map (Single_hotel[0])<i class="icon-location-5"></i></a><br>
<a href="#" class="btn_map location_map_btn properties" data-toggle="modal" data-target="#myModal" onclick="onHtmlClick('Single_hotel',1)">View Larger Map (Single_hotel[1])<i class="icon-location-5"></i></a>


<!-- The Modal map-->

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Search By Map</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div id="map_modal" class="map"></div>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn_map location_map_btn properties" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
<!-- End modal map -->

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/infobox/src/infobox.js"></script>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57030417

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档