Question

我有问题。这是我的地图代码。它运作良好。它正在动态显示地图图标。现在我想动态添加地图图标悬停名称。我怎么能这样做？

<script>  
        var infowindows = [];
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 7,
                center: new google.maps.LatLng(<?php echo  $flag[0]->lat; ?>, <?php echo  $flag[0]->lang; ?>),
                mapTypeId: 'roadmap'
            });
            var icons = {
                parking: {
                icon: '<?php echo get_template_directory_uri(); ?>/img/icon332.png'
                }
            };
            var features = [
            <?php
            foreach($map as $map)
            {
            ?>
                {
                    position: new google.maps.LatLng(<?php echo $map->lat;?>, <?php echo $map->lang;?>),
                    type: 'parking'
                }, 
            <?php
            }
            ?>  

            ];

            features.forEach(function(feature) {
              var marker = new google.maps.Marker({
                position: feature.position,
                //position: currentLatLng, 
                icon: icons[feature.type].icon,
                map: map
              });
            });
        }
    </script>
    <script  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDr-oU870bxiB7TJcrlfAtN9HjEvZzjdGI&callback=initMap"></script>

Answer 1

这是解决方案：

var map;
google.maps.event.addDomListener(window, "load", function () {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(<?php echo  $flag[0]->lat; ?>, <?php echo  $flag[0]->lang; ?>),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infoWindow = new google.maps.InfoWindow();
  function createMarker(options, html) {
    var marker = new google.maps.Marker(options);
    if (html) {
      google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(html);
        infoWindow.open(options.map, this);
      });
    }
    return marker;
  }

  <?php
    foreach($map as $map)
    {
    ?>
  var marker0 = createMarker({
    position: new google.maps.LatLng(<?php echo $map->lat;?>, <?php echo $map->lang;?>),
    map: map,
    icon: "<?php echo get_template_directory_uri(); ?>/img/icon332.png"
  }, "<?php echo $map->hotel; ?>");
  <?php
    }
    ?>

});

Answer 2

下面的教程教您更改Google地图标记的图标。在使用本教程时，了解创建标记的基础知识是有益的。

https://developers.google.com/maps/documentation/javascript/custom-markers

地图图标名称动态添加

2 个答案: