如何在Google Maps上为不同的用户创建不同的路线

时间:2019-02-25 07:05:16

标签: javascript java google-maps spring-mvc

我想在Google地图中为不同的用户绘制不同的路线,但就我而言,它仅显示最后一条。代码如下: 我是Google地图的新手。很抱歉犯错。

function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: {lat: 48.8566, lng: 2.3522}, scrollwheel: true }); }

function getUserData() {        
    var obj = [{"email_id":"user1","latlong":[{"lat":48.834159,"lng":2.333102}, {"lat":48.834611,"lng":2.337048},{"lat": 48.836306,"lng": 2.337820}]},{"email_id": "user2",latlong: [{"lat": 48.833538,"lng": 2.331625},{"lat": 48.828848,"lng": 2.327507},{"lat": 48.831899,"lng": 2.325191}]}]        

    for (i in obj) {
        var temp1 = JSON.stringify(obj[i]);
        var obj1 = JSON.parse(temp1); 

        var temp2 = JSON.stringify(obj1.latlong);
        var path = JSON.parse(temp2);
        rederGoogleMap(obj1, path);

    }

    function rederGoogleMap(obj1, path){    
        var marker;         
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom : 16,
            center : path[path.length - 1],
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: true
        });

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

        /***** create marker for starting position *****/
        marker = new google.maps.Marker({
            position: path[0],
            map: map,
            title: 'Start'
        });

        google.maps.event.addListener(marker, 'click', (function (marker, k) {
            return function () {
                infowindow.setContent(obj1.email_id);
                infowindow.open(map, marker);
            }
        })(marker));

        /***** create marker for ending position *****/
        marker = new google.maps.Marker({
            position: path[path.length - 1],
            map: map,
            title: 'End'
        });

        google.maps.event.addListener(marker, 'click', (function (marker, k) {
            return function () {
                infowindow.setContent(obj1.email_id);
                infowindow.open(map, marker);
            }
        })(marker));

        var elevator = new google.maps.ElevationService;
        displayPathElevation(path, elevator, map);
    }

    function displayPathElevation(path, elevator, map) {
        new google.maps.Polyline({
            path : path,
            strokeColor : '#0000CC',
            strokeOpacity : 0.4,
            map : map
        });
    }
}

see google map here

仅显示最后一条路由,即user2。并删除第一条路线。但要同时显示不同用户的路由。我应该怎么做。请帮助任何人。

1 个答案:

答案 0 :(得分:0)

在功能rederGoogleMap中,每次创建一个新对象=>

var map = new google.maps.Map(document.getElementById('map'), { ...}

是您的错误吗?

您需要在全局或传入参数中创建new google.maps.Map