通过“更改谷歌地图坐标”;点击”;

Change Google Maps Coordinates by "Onclick"

本文关键字：点击 坐标 谷歌地图 通过      更新时间：2023-12-31

我需要用href"View Location On Map"在javascript中更改谷歌地图坐标。坐标在表格（td）中

<script type='text/javascript'>
            function init_map() {
                var myOptions = {
                    zoom: 10
                    , center: new google.maps.LatLng(52.95628079999999, 4.76079720000007)
                    , mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
                //1
                marker = new google.maps.Marker({
                    map: map
                    , position: new google.maps.LatLng(52.95628079999999, 4.76079720000007)
                });
                infowindow = new google.maps.InfoWindow({
                    content: '<strong>TEST</strong><br>Den helder, nederland<br>'
                });
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker);
                });
                infowindow.open(map, marker);
}
                        google.maps.event.addDomListener(window, 'load', init_map);
        </script>
<table>
                    <tr> 
                        <th>ID</th>
                        <th>Box</th>
                        <th>User</th>
                        <th>Location</th>
                        <th>Coordinates</th>
                        <th>View</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>SUEZbox01</td>
                        <td>Arjan</td>
                        <td>Den Helder</td>
                        <td>52.939347, 4.754741</td>
                        <td><a href="javascript:void(0)">View Location On Map</a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>SUEZbox02</td>
                        <td>Peter Vendrig</td>
                        <td>Amstelkwartier</td>
                        <td>52.160309, 6.413578</td>
                        <td><a href="">View Location On Map</a></td>
                    </tr>
                </table>

一个选项（使用JQuery）是解析表外的坐标，并使用它们将地图居中：

$('a').click(function(evt) {
  var coordsStr = $(this).parents().find(".coords").html();
  var coords = coordsStr.split(",");
  var point = new google.maps.LatLng(coords[0], coords[1]);
  map.setCenter(point);
});

更进一步，如果你想打开相关标记上的信息窗口，你可以这样做：

$('table tr').each(function(idx, item) {
  var coordsStr = $(this).find(".coords").html(); 
  if (!coordsStr) return;
  createMarker($(this));
});
$('a').click(function(evt) {
  var coordsStr = $(this).parents().find(".coords").html();
  var coords = coordsStr.split(",");
  var point = new google.maps.LatLng(coords[0], coords[1]);
  map.setCenter(point);
  google.maps.event.trigger(markers[coordsStr],'click');
});
google.maps.event.trigger(markers["52.939347, 4.754741"],'click');

概念验证小提琴

代码片段：

var infowindow = new google.maps.InfoWindow();
var markers = [];
function init_map() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(52.95628079999999, 4.76079720000007),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
  $('table tr').each(function(idx, item) {
    var coordsStr = $(this).find(".coords").html();
    if (!coordsStr) return;
    createMarker($(this));
  });
  $('a').click(function(evt) {
    var coordsStr = $(this).parents().find(".coords").html();
    var coords = coordsStr.split(",");
    var point = new google.maps.LatLng(coords[0], coords[1]);
    map.setCenter(point);
    google.maps.event.trigger(markers[coordsStr], 'click');
  });
  google.maps.event.trigger(markers["52.939347, 4.754741"], 'click');
}
function createMarker(jqe) {
  var coordsStr = $(jqe).find(".coords").html();
  console.log(coordsStr);
  coords = coordsStr.split(",");
  var point = new google.maps.LatLng(coords[0], coords[1]);
  var marker = new google.maps.Marker({
    map: map,
    position: point
  });
  var content = '<strong>TEST</strong><br>' + jqe.find("td").eq(3).html(); + '<br>'
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(content);
    infowindow.open(map, marker);
  });
  markers[coordsStr] = marker;
}
google.maps.event.addDomListener(window, 'load', init_map);
html,
body,
#gmap_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<table>
  <tr>
    <th>ID</th>
    <th>Box</th>
    <th>User</th>
    <th>Location</th>
    <th>Coordinates</th>
    <th>View</th>
  </tr>
  <tr>
    <td>1</td>
    <td>SUEZbox01</td>
    <td>Arjan</td>
    <td>Den Helder</td>
    <td class="coords">52.939347, 4.754741</td>
    <td><a href="javascript:void(0)">View Location On Map</a>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>SUEZbox02</td>
    <td>Peter Vendrig</td>
    <td>Amstelkwartier</td>
    <td class="coords">52.160309, 6.413578</td>
    <td><a href="javasript:void()">View Location On Map</a>
    </td>
  </tr>
</table>
<div id="gmap_canvas"></div>

相关文章：