谷歌地圖API與HTML按鈕上的地方標記

-1

（我自己學習，我知道我的代碼是凌亂的，inb4對不起）我有一個表與一些數據和一個按鈕，我想，當我按下按鈕標記出現在地圖上的位置（SQL工作正常）詢問你想要的任何信息！在此先感謝谷歌地圖API與HTML按鈕上的地方標記

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="css.css"> 
</head> 
<body> 

    <!-- google maps api --> 

    <div id="map" style="width:600px;height:500px"></div> 
      <script> 
     function myMap() { 
      var santiago = new google.maps.LatLng(-33.4545832, -70.6541925); 
      var mapCanvas = document.getElementById("map"); 
      var mapOptions = {center: santiago, zoom: 11}; 
      var map = new google.maps.Map(mapCanvas, mapOptions); 
      function addmarker(lat, lon) { 
       var location = new google.maps.LatLng(lat, lon); 
       var marker = new google.maps.Marker({ 
        position: location, 
        map: map 
       }); 
      } 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDL5dMHBCV7crlostybmkuGBAXjOP3yawQ&callback=myMap"> 
    </script> 
    <div id="tabla"> 
     <table Style="width:35%"> 
      <thead> 
       <tr> 
        <th>Tiempo prom</th> 
        <th>Origen</th> 
        <th>Señal Or</th> 
        <th>Destino</th> 
        <th>Mapa</th> 
       </tr> 
      </thead> 
      <tbody> 
       <?php 
       include "conexion.php"; 
       include "func.php"; 
       $sql = "SELECT avg(call_setup_time) as promllamada, CELL_ID_1, CELL_ID_2, avg(SENAL_1) as promsenal, LATITUD_1 as lat, LONGITUD_1 as lon from call_setup where SENAL_1<=-80 GROUP BY CELL_ID_1 ORDER BY promllamada desc limit 20"; 
       $resultado = $conn->query($sql); 
       while ($row = $resultado->fetch_assoc()) { 
        ?> 
        <tr> 
         <td><?php echo $row['promllamada'] ?></td> 
         <td><?php echo $row['CELL_ID_1'] ?></td> 
         <td><?php echo $row['promsenal'] ?></td> 
         <td><?php echo $row['CELL_ID_2'] ?></td> 
         <td><button type="button" id="agregar" onclick="addmarker(<?php echo $row['lat'] . ", " . $row['lon']; ?>)">Ver en mapa</button></td> 
         <?php 
        } 
        ?> 
      </tbody> 
     </table> 
     <!-- datos --> 
    </div> 
    <div id="datos"></div> 
</body>

來源

2017-04-26 Santiago Center

這是你在找什麼？

addmarker函數被按鈕agregar調用，在myMap函數中。我把它們分開了。

我還簡化了您的map初始化和標記「setter」，將new對象直接分配給屬性。

小提琴：

https://jsfiddle.net/cbao9wLg/62/

$('#button').click(function() { 
 
    addmarker('-22.3157017', '-49.0660877', 'Infowindow test'); 
 
}); 
 
$('#button2').click(function() { 
 
    addmarker('-23.5936152', '-46.5856465', 'Infowindow test2'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button" style="width:80px;height:30px;cursor:pointer;"> 
 
    Click 
 
</button> 
 
<button id="button2" style="width:80px;height:30px;cursor:pointer;"> 
 
    Click2 
 
</button> 
 
<div id="map" style="width:555px;height:500px"></div> 
 
<script> 
 
    function myMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
     center: new google.maps.LatLng(-33.4545832, -70.6541925), 
 
     zoom: 11 
 
    }); 
 
    } 
 

 
    function addmarker(lat, lon, info) { 
 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(lat, lon), 
 
     info: new google.maps.InfoWindow({ 
 
     content: info 
 
     }), 
 
     map: map 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
     marker.info.open(map, marker); 
 
    }); 
 

 
    map.panTo(marker.getPosition()); 
 
    } 
 
</script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDL5dMHBCV7crlostybmkuGBAXjOP3yawQ&callback=myMap"></script>

來源

2017-04-26 19:55:06 doutriforce

是的，這就是我一直在尋找！謝謝:) 還有一件事，是否有可能每次都不重新加載地圖？（希望你明白這個問題） –

不客氣。「不重裝」是什麼意思？ – doutriforce

我在表格的每一行有一個按鈕，每次我點擊一個按鈕，地圖重新加載到一個新的中心，是否可以讓地圖不做這個「眨眼」 –

谷歌地圖API與HTML按鈕上的地方標記

回答

相關問題