如何将按钮放在pin标记内并在google地图中单击后链接到另一个页面

Question

我想把按钮放在标记内。单击它时，它将转发到另一个检索用户ID的页面。

以下是我想用按钮扩展的标记的屏幕截图：

代码

marker.php

<?php
  require("phpsqlajax_dbinfo.php");

  // Start XML file, create parent node
  $doc = new DomDocument('1.0');
  $node = $doc->createElement("markers");
  $parnode = $doc->appendChild($node);

  // Opens a connection to a MySQL server
  $connection=mysql_connect ('localhost', $username, $password);
  if (!$connection) {
    die('Not connected : ' . mysql_error());
  }

  // Set the active MySQL database
  $db_selected = mysql_select_db($database, $connection);
  if (!$db_selected) {
     die ('Can\'t use db : ' . mysql_error());
  }

  // Select all the rows in the markers table
  $query = "SELECT * FROM markers WHERE 1";
  $result = mysql_query($query);
  if (!$result) {
    die('Invalid query: ' . mysql_error());
  }


  // Iterate through the rows, adding XML nodes for each
  while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  $node = $doc->createElement("marker");
  $newnode = $parnode->appendChild($node);

  $newnode->setAttribute("id", $row['id']);
  $newnode->setAttribute("user_id", $row['user_id']);
  $newnode->setAttribute("name", $row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("type", $row['type']);
  }

  echo $doc->saveXML();
  ?>

地图脚本

  <script>
    var customLabel = {
    Elementary: {
    label: 'E'
    },
    HighSchool: {
    label: 'H'
    }
    };

    function initialize() {
    var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(9.7151, 122.8987),
    zoom: 10
    });

    var infoWindow = new google.maps.InfoWindow;

     // Change this depending on the name of your PHP or XML file
      downloadUrl('http://localhost/missionbridcon/marker.php', 

    function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var id = markerElem.getAttribute('id');
          var user_id = markerElem.getAttribute('user_id');
          var name = markerElem.getAttribute('name');
          var address = markerElem.getAttribute('address');
          var type = markerElem.getAttribute('type');
          var point = new google.maps.LatLng(
            parseFloat(markerElem.getAttribute('lat')),
            parseFloat(markerElem.getAttribute('lng')));
          var infowincontent= new google.maps.InfoWindow({
          content: document.getElementById('form')
            });
          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = name
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = address
          infowincontent.appendChild(text);
          var icon = customLabel[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });
          marker.addListener('click', function() {
            infoWindow.setContent(infowincontent);
            infoWindow.open(map, marker);
          });

        });
      });
    }


    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}
  </script>

  <script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZ2nfVhxwcAagjUeQ50NiDiN2dQDHTypA&callback=initialize">
</script>

<div class="container" style="margin-top:130px;">    
<div class="row content">
  <div class="col-md-12"> 
    <h1>Welcome to Mission BridCon</h1><br>
    <div id="map" style="width:100%;height:500px;"></div>


  </div>
</div>

Answer 1

在下面打开一个信息窗口：

 marker.addListener('click', function() {
        infoWindow.setContent(infowincontent);
        infoWindow.open(map, marker);
      });

但是如果你想去另一个页面使用：

marker.addListener('click', function() {
      window.location.href = this.url;
    });

在标记循环中定义网址