使用 html 按钮在谷歌地图 api 上放置标记答案

【问题标题】：Place marker on google maps api with html button使用 html 按钮在谷歌地图 api 上放置标记
【发布时间】：2017-04-26 18:52:12
【问题描述】：

（我在自学，我知道我的代码很乱，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>

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

这就是你要找的吗？

由按钮agregar 调用的addmarker 函数位于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>

【讨论】：

是的，这就是我要找的东西！！谢谢 :) 还有一件事，有没有可能每次都重新加载地图？（希望你理解这个问题）
我在表格的每一行都有一个按钮，每次单击按钮时，地图都会重新加载到新的中心，是否可以让地图不这样做“闪烁”
@SantiagoCenter，我正在 addmarker 函数中重新创建地图。那真的没有必要。请看看现在是否可以。
没问题！！ :)
打扰一下，你能帮我在我点击标记时添加一个信息窗口吗？