Question

我在地图上使用了一个带有多个标记的脚本和信息窗口，但我无法让按钮引用标记，因为当我点击按钮时我需要一个简单的功能激活一个特定的制造商并打开信息窗口

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Cover Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="cover.css" rel="stylesheet">

      <script src="http://maps.google.com/maps/api/js?sensor=false"></script>


    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>



        <div class="cover-container">

        <div class="row">
            <img src="logo.png" width="550px" height="250px" class="center-block"></img>
        </div>
        <div class="row">
        <h1 style="text-align: center; color:#ffffff; margin-top:-30px;">Our Banches</h1>
         </div>

        <div class="row">
         <div class="col-xs-6"><div id="googleMap" style="width:761px;height:350px;"></div></div>
  <div class="col-xs-6"></div>

         </div>
         <br>
<center>
          <div class="row">

        <div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Our Branches <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Shorouk City</a></li>
    <li><a href="#">Nasr City</a></li>
    <li><a href="#">Rehab</a></li>

  </ul>
</div>
        </center>
                  <br>
                           <br>
         <br>

         <br>


         </div>


          <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

我想要处理的js代码：

<script>
        // Define your locations: HTML content for the info window, latitude, longitude
        var locations = [
          ['<h4>Guntur Nprodax India</h4>', 16.306652, 80.436540],
          ['<h4>Vijayawada</h4>', 16.506174, 80.648015],
         ['<h4>Vizag India</h4>', 17.686816, 83.218482],
         ['<h4>Kurnool</h4>', 15.828126, 78.037279],
         ['<h4>Kadapa India</h4>', 14.467354, 78.824134],
         ['<h4>Madanapalle</h4>', 13.550000, 78.500000],
         ['<h4>Mumbai India</h4>', 19.075984, 72.877656],
         ['<h4>Ahmedabad</h4>', 23.022505, 72.571362],
         ['<h4>Chennai</h4>', 13.082680, 80.270718],
         ['<h4>Coimbatore</h4>', 11.016844, 76.955832],
         ['<h4>New Delhi</h4>', 28.644371, 77.219678]  

        ];

        // Setup the different icons and shadows
        var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

        var icons = [
          iconURLPrefix + 'red-dot.png',
          iconURLPrefix + 'blue-dot.png',
          iconURLPrefix + 'orange-dot.png'

        ]
        var iconsLength = icons.length;

        var map = new google.maps.Map(document.getElementById('googleMap'), {
          zoom: 5,
          center: new google.maps.LatLng(22.2323552,80.2649705),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
          streetViewControl: false,
          panControl: false,
          zoomControlOptions: {
             position: google.maps.ControlPosition.LEFT_BOTTOM
          }
        });

        var infowindow = new google.maps.InfoWindow({
          maxWidth: 160
        });

        var markers = new Array();

        var iconCounter = 0;

        // Add the markers and infowindows to the map
        for (var i = 0; i < locations.length; i++) {  
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: icons[iconCounter]
          });

          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));

          iconCounter++;
          // We only have a limited number of possible icon colors, so we may have to restart the counter
          if(iconCounter >= iconsLength) {
            iconCounter = 0;
          }
        }

        function autoCenter() {
          //  Create a new viewpoint bound
          var bounds = new google.maps.LatLngBounds();
          //  Go through each...
          for (var i = 0; i < markers.length; i++) {  
            bounds.extend(markers[i].position);
          }
          //  Fit these bounds to the map
          map.fitBounds(bounds);
        }
        autoCenter();
      </script> 





            </div>



        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="bootstrap.min.js"></script>

我需要这个链接

<li><a href="#">Shorouk City</a></li>

引用此标记onclick：

      ['<h4>Guntur Nprodax India</h4>', 16.306652, 80.436540],

如果你有打开标记和信息窗口的简单功能，请点击

按钮在地图上引用多个标记

0 个答案: