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

Google地图使用javascript添加多个标记

1 个答案: