谷歌地图使用javascript添加多个标记

Question

因此，这组代码从 C# 后端提取位置（纬度、经度和地址）。 后端代码从 SQL 数据库中提取数据并将其输入到 ASP.Net DataField 列中。 这是对包含 Google 地图的预构建应用程序的增强。 这些位置拉得很好，并且通过它可以正确显示纬度和经度。 我遇到的问题是只有一个标记出现，看起来是最后一个。 就好像每个位置实际上并没有添加一个新的标记，而是覆盖了当前的标记，从而将最后一个位置作为地图上的标记。 我需要进行哪些更改才能让每个位置都显示为新标记？

<script type="text/javascript">

    function locate() {
        var inputList = GridView1.getElementsByTagName("td");
        var rows = GridView1.getElementsByTagName("tr");
       // var markers = inputList[0].innerHTML;
        for (i = 1; i < rows.length; i++) {
            var lat = rows[i].cells[2].innerHTML;
            var lng = rows[i].cells[3].innerHTML;
            var addr = rows[i].cells[1].innerHTML;
            var mapOptions = {
                center: new google.maps.LatLng(rows[1].cells[2].innerHTML, rows[1].cells[3].innerHTML),
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var markers = [];
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var data = rows[i]
            var myLatlng = new google.maps.LatLng(data.cells[2].innerHTML, data.cells[3].innerHTML);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });
            markers.push(marker);
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.cells[1].innerHTML);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
    }
</script>

<div id="dvMap" style="width: 500px; height: 500px">
</div>

</form>
</body>
</html>

Answer 1

您正在同一个循环中创建地图和标记。即您正在创建一个带有单个标记的地图，行次。您想在循环之外创建地图。像这样的：

function locate() {
    var rows = GridView1.getElementsByTagName("tr");
    var mapOptions = {
        center: new google.maps.LatLng(rows[1].cells[2].innerHTML, rows[1].cells[3].innerHTML),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

    for (i = 1; i < rows.length; i++) {
        var data = rows[i];
        var myLatlng = new google.maps.LatLng(data.cells[2].innerHTML, data.cells[3].innerHTML);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.cells[1].innerHTML);
                infoWindow.open(map, marker);
            });
        })(marker, data);
    }
}