地图标记信息不显示

map marker info ins not displaying

本文关键字：显示 信息 图标 地图      更新时间：2023-09-26

我刚刚遇到谷歌地图多标记脚本的问题，我有多个标记，当我在外部链接上点击定位时，地图会放大到特定的谷歌纬度、经度。

但如果你能看到我在每个标记上都有信息框。如果我点击地图标记，它会打开信息框。但当我点击外部缩放链接时，它没有显示标记的信息框。

有人能在这件事上帮我吗。请查看下面链接中的示例

http://saudisoftechportal.us/map.html

问题是，当您单击外部链接时，resetMap方法会平移到所需的LatLng并缩放到给定的缩放级别，但不会打开标记处的信息窗口。也许你也应该根据位置使用标记数组。以下是您的问题示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100%;
        height: 400px;
      }
    .maker{ margin:auto;}
    .maker li{ list-style:none; float:left; width:100%; margin-bottom:8px;}
    .maker li img{ width:34px; height:34px; display:block; float:left;}
    .maker li span{ display: block; float: left; line-height: 27px; font-weight: bold; margin-left: 10px;}
    </style>
  </head>
<body>
    <div id="map"></div>
    <div class="span4">
        <ul id="markerul" class="maker">
        </ul>
    </div>  
    <script type="text/javascript">
        var map;
        var infowindow;
        var marker;
        var markers = [];
        var locations = [
              ['<strong>Head Office Khobar</strong>', 26.3411159,50.1936446,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',0],
              ['<strong>Dammam Office</strong>', 26.409727,50.1314224,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',1],
              ['<strong>Khafji Office</strong>', 28.4155603,48.509478,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',2],
              ['<strong>Riyadh Office</strong>', 24.6717577,46.7262669,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',3],
              ['<strong>Jeddah Office</strong>', 21.5228383,39.1793113,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',4],
              ['<strong>Warehouse</strong>', 26.4152548,50.1606446,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',5],
              ['<strong>Workshop</strong>', 26.4146399,50.156845,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',6],
              ['<strong>PMT Office</strong>', 14.576208,120.997944,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',7]
        ];
        function initMap(){
            map = new google.maps.Map(document.getElementById('map'), {
              zoom: 5,
              scrollwheel: false,
              center: new google.maps.LatLng(23.884248, 45.078492),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            infowindow = new google.maps.InfoWindow();
            for (var i = 0; i < locations.length; i++) {  
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    icon: locations[i][3]
                });
                markers.push(marker);
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
                })(marker, i));
            }
            listFill();
        }
        function resetMap(elem, zoom) {
            var newPos = new google.maps.LatLng(locations[elem][1], locations[elem][2]);
            infowindow.setContent(locations[elem][0]);
            infowindow.open(map, markers[elem]);
            map.setZoom(zoom);
            map.panTo(newPos);
        };
        function listFill(){
            $('#markerul ul').html('');
            for (var i = 0; i < locations.length; i++) {  
                var liItem = '<li><a href="javascript:void(0);" onclick="resetMap(' + i + ',15);"><img src="' + locations[i][3] + '" alt="' +  locations[i][0] + '"/><span>' + locations[i][0] + '</span></a></li>';
                $('#markerul').append(liItem);
            };
        };
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body> 
</html>

我希望它能有所帮助！

相关文章：