将标记放在谷歌地图API与HTML按钮 [英] Place marker on google maps api with html button
本文介绍了将标记放在谷歌地图API与HTML按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
（我自己学习，我知道我的代码很混乱，inb4抱歉）
我有一张带有一些数据和一个按钮的表格，我希望当我按下按钮时，地图中的位置（SQL工作正常）
询问你想要的任何信息！提前感谢
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8>
< title>< / title>
< link rel =stylesheettype =text / csshref =css.css>
< / head>
< body>
<！ - google maps api - >
< div id =mapstyle =width：600px; height：500px>< / div>
< script>
函数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）;
函数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>
Tiempo prom< th>
Origen< / th>
señal或< / th>
Destino< / th>
mapa< / th>
< / tr>
< / thead>
< tbody>
<？php
包含conexion.php;
包含func.php;
$ sql =选择avg（call_setup_time）作为promllamada，CELL_ID_1，CELL_ID_2，avg（SENAL_1）作为promsenal，LATITUD_1作为lat，LONGITUD_1作为lon from call_setup，其中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 =buttonid =agregaronclick =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
$ b
https://jsfiddle.net/cbao9wLg/62/
< script src =https://ajax.googleapis.com/ajax/libs/jquery/ 2.1.1 / jquery.min.js>< / script>< button id =buttonstyle =width：80px; height：30px; cursor：pointer;>点击< / button>< button id =button2style =width：80px; height：30px; cursor：pointer;> Click2< / button>< div id =mapstyle =width：555px; height：500px>< / div>< script>函数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>
(I'm learning on my own, I know my code is messy, inb4 sorry) I have a table with some data and a button, I want that when I press the button a marker appears on the map in the location (the sql works fine) Ask for any information you want! thanks in advance
<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>
解决方案
Is this what you're looking for?
The addmarker function, being called by the button agregar, was inside the myMap function. I have separated them.
I have also simplified your map initialization and the marker "setter", assigning new objects directly to properties.
Fiddle:
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>
这篇关于将标记放在谷歌地图API与HTML按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
