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

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

我不想展示所有的细节。我只想显示当我在地图上单击一个地方时出现的标记的纬度和经度。这是我的代码（我想在表中显示纬度和经度，而不是在

infoWindow

中显示）：

函数myMap（）{
var mapCanvas=document.getElementById（“map”）；
var myCenter=new google.maps.LatLng（6.821055580.0405499）；
var mapOptions={center:myCenter，zoom:12}；
var map=new google.maps.map（mapCanvas，mapOptions）；
google.maps.event.addListener（映射，'click'，函数（事件）{
地点标记（地图、事件、板条）；
});
}
功能位置标记（地图、位置）{
var marker=new google.maps.marker({
位置:位置,，
地图：地图，动画：google.maps.animation.BOUNCE
});
var infowindow=new google.maps.infowindow({
内容：“纬度：”+location.lat（）+”
经度：“+location.lng（）
});
信息窗口。打开（地图、标记）；
}

如何通过编辑此代码来实现此目的？

请尝试以下代码：

<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>

拉特
液化天然气
函数myMap（）{
var mapCanvas=document.getElementById（“map”）；
var myCenter=new google.maps.LatLng（6.821055580.0405499）；
var mapOptions={center:myCenter，zoom:12}；
var map=new google.maps.map（mapCanvas，mapOptions）；
google.maps.event.addListener（映射，'click'，函数（事件）{
地点标记（地图、事件、板条）；
});
}
功能位置标记（地图、位置）{
var marker=new google.maps.marker({
位置:位置,，
地图：地图，动画：google.maps.animation.BOUNCE
});
$（'#info'）.append（''+location.lat（）+''+location.lng（）+''）；
var infowindow=new google.maps.infowindow({
内容：“纬度：”+location.lat（）+”
经度：“+location.lng（）
});
信息窗口。打开（地图、标记）；
}

您正在将

纬度：'+location.lat（）+'
经度：'+location.lng（）

设置为信息窗口内容。因此，只需使用它来设置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>

<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>