谷歌地图API与HTML按钮上的地方标记
问题描述:
(我自己学习,我知道我的代码是凌乱的,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>
答
这是你在找什么?
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>
是的,这就是我一直在寻找!谢谢:) 还有一件事,是否有可能每次都不重新加载地图? (希望你明白这个问题) –
不客气。 “不重装”是什么意思? – doutriforce
我在表格的每一行有一个按钮,每次我点击一个按钮,地图重新加载到一个新的中心,是否可以让地图不做这个“眨眼” –