时间戳

首页 > 解决方案 > 点击时谷歌地图更改标记图标

javascript - 点击时谷歌地图更改标记图标

问题描述

如何在单击标记时（在单击事件上）更改标记图标，并在单击另一个标记时将其恢复为正常图标？

如何加载已单击标记的地图？

此外，如果可以在单击图标时添加一些动画，例如过渡。

function initialize() {
    /* Lat. and Lon. of the center of the map */
    var myCenter = new google.maps.LatLng(42.8012564, 10.75113);

    // Create a map object, and include the MapTypeId to add
    // to the map type control.
    var mapOptions = {
        zoom: 14,               //zoom level
        center: myCenter,       //center position
        scrollwheel: false,     //zoom when scroll disable
        zoomControl: true,      //show control zoom
        disableDefaultUI: true,
        mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
        }
    };

    var map = new google.maps.Map(document.getElementById('map'),mapOptions);

    var image1 = 'http://puntaala.noonicbeta.com/wp-content/themes/Wordpress/img/marker-grey.svg';



                  var marker2 = new google.maps.Marker({
                      position: new google.maps.LatLng(42.80207599824027, 10.756003014830668),
                      map: map,
                      icon: image1,
                      title: 'Hotel',
                      description: 'Magna exercitation id culpa eiusmod velit veniam. Cillum eiusmod irure dolore officia proident eiusmod Lorem dolore. Enim cupidatat esse laborum minim sint laborum ad duis ea est adipisicing incididunt ut veniam. Aliqua exercitation aute nostrud labore cupidatat velit commodo tempor minim voluptate non quis voluptate. Cupidatat aute velit est reprehenderit eu fugiat aliquip est do […]',
                      luogo: 'LA MAREMMA',
                      indirizzo: 'Costigliole della Pescaia',
                  });

                  function showClick (marker) {
                  var title = document.getElementById('title');
                  var description = document.getElementById('description');
                  var luogo = document.getElementById('luogo');
                  var indirizzo = document.getElementById('indirizzo');
                  title.innerHTML=marker.title;
                  description.innerHTML=marker.description;
                  indirizzo.innerHTML=marker.indirizzo;
                  luogo.innerHTML=marker.luogo;
                  marker.setIcon("http://puntaala.noonicbeta.com/wp-content/themes/Wordpress/img/marker.svg");
                  }

                  google.maps.event.addListener(marker2, 'click', function() {
                  showClick(marker2);
                  });


                  var marker1 = new google.maps.Marker({
                      position: new google.maps.LatLng(42.8012564, 10.75113),
                      map: map,
                      icon: image1,
                      title: 'Roccaforte',
                      description: 'ex ex reprehenderit aute exercitation cupidatat deserunt irure cillum sit ad culpa aliqua aliqua cupidatat anim exercitation commodo incididunt proident adipisicing fugiat excepteur elit voluptate incididunt minim esse ea incididunt voluptate amet ipsum quis sunt ullamco non consequat non eiusmod dolore nulla occaecat mollit pariatur cupidatat aliquip adipisicing voluptate nulla esse labore ad ipsum quis […]',
                      luogo: 'La Maremma',
                      indirizzo: 'Costigliole della Pescaia',
                  });

                  function showClick (marker) {
                  var title = document.getElementById('title');
                  var description = document.getElementById('description');
                  var luogo = document.getElementById('luogo');
                  var indirizzo = document.getElementById('indirizzo');
                  title.innerHTML=marker.title;
                  description.innerHTML=marker.description;
                  indirizzo.innerHTML=marker.indirizzo;
                  luogo.innerHTML=marker.luogo;
                  marker.setIcon("http://puntaala.noonicbeta.com/wp-content/themes/Wordpress/img/marker.svg");
                  }

                  google.maps.event.addListener(marker1, 'click', function() {
                  showClick(marker1);
                  });

          }
google.maps.event.addDomListener(window, 'load', initialize);
</script>

标签： javascriptgoogle-maps

解决方案

如何在单击标记时（在单击事件上）更改标记图标，并在单击另一个标记时将其恢复为正常图标？

您可以使用 google maps api 来使用标记的“信息窗口”功能。只有一个活动窗口的处理已经完成。您可以查看信息窗口文档。但是，如果您想自己执行此操作，则可以将所有标记全局保存在一个数组中，并具有“取消选择”除您刚刚选择的标记之外的所有其他标记的功能。就像您的“showClick(marker)”功能一样，反之亦然。

如何加载已单击标记的地图？

为此，您可以在初始化函数的末尾调用您的 showClick(marker1) 函数，或者当您使用谷歌地图 api 中的“信息窗口”时，您可以在最后分别调用 infowindow.open(map, marker) 如果你的初始化函数。

此外，如果可以在单击图标时添加一些动画，例如过渡。

谷歌地图 api 也支持这一点。您可以查看标记动画文档以了解它是如何实现的

推荐阅读