从数据库向googleMap显示多个区域

kjthegm6 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(301)

我想用javascript在谷歌Map上显示一个城市的一些区域的纬度。我有一个适当的数据列表，上面有area，lat，lon，下面给出了我的javascript代码

<!--  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5bEQj6ZsKK1pSOdWGhzL43s2R6pDr2-o"></script> 
-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5bEQj6ZsKK1pSOdWGhzL43s2R6pDr2-o&callback=InitMap">

</script>

<script type="text/javascript">
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const uid = urlParams.get('uname')

let list=[];
var run;

var put =[];
collectArea();

function collectArea() {
    $.ajax({
        type : 'GET',
        dataType : "json",
        data: {userid : uid},
        url : 'UserlocationServlet?method=collectArea',
        success : function(data, status, xhr) {
            $.each(data, function(i,obj) {
                list.push([data[i].area,data[i].lat_no,data[i].lon_no]);
            });
            run=list;
            InitMap(run);

        },
        error : function(xhr, status, error) {
            alert(status);
        }
    });
}   

function InitMap(locations) {
    alert(locations);
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: new google.maps.LatLng(23.8103,90.4125),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}
</script>

但列表中的数据并没有显示在Map上，但我遵循了一个文档，其中包括

var locations = [
        ['Raj Ghat', 28.648608, 77.250925, 1],
        ['Purana Qila', 28.618174, 77.242686, 2],
        ['Red Fort', 28.663973, 77.241656, 3],
        ['India Gate', 28.620585, 77.228609, 4],
        ['Jantar Mantar', 28.636219, 77.213846, 5],
        ['Akshardham', 28.622658, 77.277704, 6]
    ];

这些区域显示在Map上。请帮我解决这个问题。

JavaScript google-maps

来源：https://stackoverflow.com/questions/68308637/show-multiple-area-into-google-map-from-database

1条答案

按热度按时间

nc1teljy1#

声明 initMap 函数作为脚本uri中的回调函数，但在您的情况下，这不一定是显式调用 InitMap 函数，并希望将一些数据传递给 InitMap 功能。因此，您应该指定 collectArea 作为脚本uri中的回调。
我还建议您在将json数据传递给 InitMap 函数-在我看来，最好是处理原始json数据，而不是担心数组索引，因此在下面的文章中，我修改了流程，以便json在被使用到 initMap 功能。

<!--
/*

    As you are calling the `InitMap` within the `collectArea` callback 
    function you should set the map script callback to `collectArea`!!

* /

-->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyB5bEQj6ZsKK1pSOdWGhzL43s2R6pDr2-o&callback=collectArea"></script>
<script>

    function collectArea() {
        const qs = window.location.search;
        const p = new URLSearchParams(qs);
        const uid = p.get('uname');
        /*
            leave the source data as JSON and pass
            that to the `InitMap` function.
        */
        $.ajax({
            type: 'GET',
            dataType: "json",
            data: { userid : uid },
            url: 'UserlocationServlet?method=collectArea',
            success: function(data, status, xhr) {
                InitMap(data);
            },
            error: function(xhr, status, error) {
                alert(status);
            }
        });
    }   

    function InitMap( locations ) {
        /*
            After loading the map you can iterate through
            the JSON data and add a new marker for each 
            location.
        */
        const map = new google.maps.Map( document.getElementById('map'), {
            zoom: 13,
            center: new google.maps.LatLng( 23.8103, 90.4125 ),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        const infowindow = new google.maps.InfoWindow();

        const clickhandler=function(){
            /*
                This callback is `bound` to the marker so we
                can use `this` to refer to the marker itself.
                As the `area` data has been assigned as a custom
                property of the marker we can access it using 
                `this.area`
            */      
            infowindow.setContent( this.content );
            infowindow.open( map, this );       
        };

        // iterate over json data locations
        Object.keys( locations ).forEach( k=>{
            let obj=locations[k];

            let marker=new google.maps.Marker({
                position: new google.maps.LatLng( obj.lat_no, obj.lon_no ),
                map: map,
                content:obj.area    //custom property
            });
            google.maps.event.addListener( marker, 'click', clickhandler.bind( marker ) );  //bound marker
        })
    }
</script>

赞(0）回复(0）举报 2021-09-13

我来回答

从数据库向googleMap显示多个区域

1条答案

相关问题

热门标签

最新问答