Question

我想在地图旁边的表格上显示我单击的所有地标的位置，例如以下示例enter image description here

我不想显示所有详细信息。我只想显示在地图上单击某个位置时显示的标记的纬度和经度。这是我的代码（我想在表格中显示纬度和经度，而不是在infoWindow中显示它们）：

<!DOCTYPE html>

<div id="map" style="width:100%;height:500px;"></div>

<script>
    function myMap() {
        var mapCanvas = document.getElementById("map");
        var myCenter = new google.maps.LatLng(6.8210555, 80.0405499);
        var mapOptions = { center: myCenter, zoom: 12 };
        var map = new google.maps.Map(mapCanvas, mapOptions);
        google.maps.event.addListener(map, 'click', function (event) {
            placeMarker(map, event.latLng);
        });
    }

    function placeMarker(map, location) {
        var marker = new google.maps.Marker({
            position: location,
            map: map, animation: google.maps.Animation.BOUNCE
        });
        var infowindow = new google.maps.InfoWindow({
            content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
        });
        infowindow.open(map, marker);
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6ocynS4HxsKTgJu-8sq9uMqSBFafAhsg&callback=myMap"></script>

<center>
    <h4>
        <a href="secondQuestion.html">Go to the answer of 4th Question</a>
    </h4>
</center>
<br />
<center>
    <h4>
        <a href="HtmlPage1.html">Go to the answer of 3rd Question</a>
    </h4>
</center>

如何通过编辑此代码来做到这一点？

Answer 1

尝试以下代码：

<div id="map" style="width:100%;height:500px;"></div>

<table>
    <thead>
        <tr>
            <th>Lat</th>
            <th>Lng</th>
        </tr>
    </thead>
    <tbody id="info">

    </tbody>
</table>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script>
    function myMap() {
        var mapCanvas = document.getElementById("map");
        var myCenter = new google.maps.LatLng(6.8210555, 80.0405499);
        var mapOptions = { center: myCenter, zoom: 12 };
        var map = new google.maps.Map(mapCanvas, mapOptions);
        google.maps.event.addListener(map, 'click', function (event) {
            placeMarker(map, event.latLng);
        });
    }

    function placeMarker(map, location) {
        var marker = new google.maps.Marker({
            position: location,
            map: map, animation: google.maps.Animation.BOUNCE
        });

        $('#info').append('<tr><td>'+location.lat()+'</td><td>'+location.lng()+'</td></tr>');

        var infowindow = new google.maps.InfoWindow({
            content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
        });
        infowindow.open(map, marker);
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6ocynS4HxsKTgJu-8sq9uMqSBFafAhsg&callback=myMap"></script>

<center>
    <h4>
        <a href="secondQuestion.html">Go to the answer of 4th Question</a>
    </h4>
</center>
<br />
<center>
    <h4>
        <a href="HtmlPage1.html">Go to the answer of 3rd Question</a>
    </h4>
</center>

如何在Google地图旁边的桌子上显示所有地标的位置？

1 个答案: