Google Maps使用JavaScript添加多个标记

Question

因此，这组代码从C＃后端提取位置（纬度，经度和地址）。 后端代码从SQL数据库中提取数据，并将其输入到ASP.Net DataField列中。 它是对包含Google Maps的预构建应用程序的增强。 这些位置拉得很好，并且逐步穿过它可以正确显示纬度和经度。 我遇到的问题是只有一个标记显示，这似乎是最后一个。 好像每个位置实际上并没有添加新的标记，而是覆盖当前位置，从而将最后一个位置保留为地图上的标记。 我需要更改什么以使每个位置都显示为新标记？

<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);
    }
}