Question

（我自己学习，我知道我的代码很乱，inb4抱歉）我有一个包含一些数据和一个按钮的表，我希望当我按下按钮时，地图上出现一个标记（sql工作正常）询问您想要的任何信息！提前谢谢

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

Answer 1

这是你正在寻找的吗？

按钮addmarker调用的agregar函数位于myMap函数内。我把他们分开了。

我还简化了您的map初始化和标记＆＃34; setter＆＃34;，将new个对象直接分配给属性。

小提琴：

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用html按钮在google maps api上放置标记

1 个答案: