如何在JavaScript(Google地图)中插入链接

时间:2019-07-29 15:20:07

标签: javascript google-maps

我想在JavaScript内插入一个链接。

我想要此链接infoWindow.setContent('<a href="add-sesizare.php?lat=">Adaugă sesizare pentru locația ta actuală </a>.'); 将用户发送到add-sesizare.php?lat=&lng=&userid=

<?php include 'header.php'; 
session_start();


 if (isset($_SESSION['user'])) {
    $email = $_SESSION['user'];
    $query = "SELECT * FROM useri WHERE email='$email' LIMIT 1";
    $result = mysqli_query($con,$query);
    $user = mysqli_fetch_assoc($result);
    $userid = $user['id'];
} else { header('Location: login.php'); }
?>
<div class="head-first">
           <div class="d-flex justify-content-between">
                    <a class="navbar-brand" href="#">
                    <i class="fas fa-users"></i> MyCity Curtici
                    </a>
                    <span style="font-size:30px;cursor:pointer;padding: 0 0 0 15px;" onclick="openNav()">&#9776;</span>
            </div> 
</div>
    <div id="map"></div>
    <script>
      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.
      var map, infoWindow;
      var user_id = "<?php echo $userid ?>";
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 46.35, lng: 21.3},
          zoom: 15
        });
        infoWindow = new google.maps.InfoWindow;

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            infoWindow.setPosition(pos);
            infoWindow.setContent('<a href="add-sesizare.php?lat=">Adaugă sesizare pentru locația ta actuală </a>.');
            infoWindow.open(map);
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
        google.maps.event.addListener(map, 'click', function(event) {
        window.location='add-sesizare.php?lat='+event.latLng.lat()+'&long='+event.latLng.lng()+'&userid='+user_id;
        });
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
      }
    </script>

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

<?php include 'footer.php' ?>

1 个答案:

答案 0 :(得分:0)

您的'"存在问题,并且您没有尝试添加地理位置服务返回的经纬度本地值(我认为这是必需的) )。

infoWindow.setContent('<a href="add-sesizare.php?lat=' + pos.lat + '&long=' + pos.lng + '&userid=' + user_id +'">Adaugă sesizare pentru locația ta actuală </a>.');

(使用'表示JavaScript字符串,使用"引用HTML)。

proof of concept fiddle

代码段:

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
var map, infoWindow;
var user_id = "$userid";

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 46.35,
      lng: 21.3
    },
    zoom: 15
  });
  infoWindow = new google.maps.InfoWindow;

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      infoWindow.setPosition(pos);
      infoWindow.setContent('<a href="add-sesizare.php?lat=' + pos.lat + '&long=' + pos.lng + '&userid=' + user_id + '">Adaugă sesizare pentru locația ta actuală </a>.');
      infoWindow.open(map);
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }

  google.maps.event.addListener(map, 'click', function(event) {
    window.location = 'add-sesizare.php?lat=' + event.latLng.lat() + '&long=' + event.latLng.lng() + '&userid=' + user_id;
  });
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
    'Error: The Geolocation service failed.' :
    'Error: Your browser doesn\'t support geolocation.');
  infoWindow.open(map);
}
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>