单击按钮后在GoogleMaps上选择一个点

时间:2018-11-10 06:51:50

标签: javascript google-maps

我有此代码:

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
      <a href ="#" class="obj-1" id="obj-1"><div class="apartament_atrakcje">Atrakcja 1 pl</div></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
      <a href ="#" class="obj-2" id="obj-2"><div class="apartament_atrakcje">Atrakcja 2 PL</div></a>
</div>
<div id="map_canvas"></div>
<script>
   window.onload = function () {
       var styles = [{"featureType":"all"}];
       var bounds = new google.maps.LatLngBounds();
       var options = {
           mapTypeControlOptions: {
               mapTypeIds: ['Styled']
           },
           center: new google.maps.LatLng(11, 22),
           zoom: 15,
           disableDefaultUI: true,
           mapTypeId: 'Styled'
       };
       marker = new google.maps.Marker({
           map:map,
       });
       var div = document.getElementById('map_canvas');
       var map = new google.maps.Map(div, options);
       var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });

       var markers = [
                        [
                          'Atrakcja 1 pl', 
                           51.73925413, 
                           19.51309225, 
                           'Atrakcja 1 pl', 
                           '#'
                         ],
                         [
                           'Atrakcja 2 PL', 
                            53.41475000, 
                            14.60220358, 
                           'Atrakcja 2 PL', 
                           '#'
                         ],
                     ];
       var infoWindow= new google.maps.InfoWindow({maxWidth:600}),
           marker, i,
           image = 'http://localhost/assets/poi.png';

       for( i = 0; i < markers.length; i++ ) {
           var beach = markers[i];
           var position = new google.maps.LatLng(beach[1], beach[2]);
           bounds.extend(position);
           marker = new google.maps.Marker({
               position: position,
               map: map,
               icon: image,
               title: beach[0],
               myurl: beach[4]
           });

           google.maps.event.addListener(marker, 'click', (function(marker, i) {
               return function() {
                   infoWindow.setContent('<a href="'+marker['myurl']+'">'+marker['title']+'</a>');
                   infoWindow.open(map, marker);
               }
           })(marker, i));
           map.fitBounds(bounds);
           map.mapTypes.set('Styled', styledMapType);

       }
   }
</script>

我有2个链接:

- Atrakcja 1 pl
- Atrakcja 2 pl.

我想点击上面的链接以在Google地图上选择合适的标记。

因此,如果用户单击链接“ Atrakcja 1 pl”,则Google地图将显示标记Atrakcja 1 pll。我希望此标记在地图上居中,并且其提示将可见。

如何在我的代码中执行此操作?

请帮帮我。

2 个答案:

答案 0 :(得分:1)

使用addmarker函数,如下所示:

var markers = [
                        [
                          'Atrakcja 1 pl', 
                           51.73925413, 
                           19.51309225, 
                           'Atrakcja 1 pl', 
                           '#'
                         ],
                         [
                           'Atrakcja 2 PL', 
                            53.41475000, 
                            14.60220358, 
                           'Atrakcja 2 PL', 
                           '#'
                         ],
                     ];

function addmarker(point) {
    var latlng = new google.maps.LatLng(point[1], point[2]);
    var marker = new google.maps.Marker({
        position: latLang,
        title: point[0],
        draggable: true,
        map: map
    });
    map.setCenter(marker.getPosition())
}

$('#obj-1').on('click', function() {
    addmarker(markers[0])
})

$('#obj-2').on('click', function() {
    addmarker(markers[1])
})

此代码使用jquery

将此添加到您的html head标签

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

答案 1 :(得分:0)

设置标记使用后

map.setCenter(marker.position);
marker.setMap(map);

并且您还必须包括脚本来显示地图

<script src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&callback={function}" async defer></script>