Question

我使用谷歌地图api绘制图表上的一些点，图表使用数组绘制，如下面的示例所示

<!DOCTYPE html>
<html>
<head lang="en">
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        var markers = [{
            "title": 'point4',
            "lat": '1.355333',
            "lng": '103.987305',
            "description": 'uuu'
        }, {
            "title": 'point3',
            "lat": '1.354432',
            "lng": '103.987262',
            "description": 'zzz'
        },  {
            "title": 'point3',
            "lat": '1.354432',
            "lng": '103.987262',
            "description": 'zzz'
        },{
            "title": 'point3',
            "lat": '1.353199',
            "lng": '103.986908',
            "description": 'zzz'
        },{
            "title": 'point3',
            "lat": '1.353199',
            "lng": '103.986908',
            "description": 'zzz'
        }, {
            "title": 'point4',
            "lat": '1.352389',
            "lng": '103.986538',
            "description": 'zzz'
        },{
            "title": 'point1',
            "lat": '1.353751',
            "lng": '103.986688',
            "description": 'xxxx'
        }, {
            "title": 'point2',
            "lat": '1.352657',
            "lng": '103.986184',
            "description": 'yyyy'
        }, {
            "title": 'point3',
            "lat": '1.352657',
            "lng": '103.986184',
            "description": 'zzz'
        }, {
            "title": 'point4',
            "lat": '1.351477',
            "lng": '103.985701',
            "description": 'uuu'
        }, {
            "title": 'point4',
            "lat": '1.351477',
            "lng": '103.985701',
            "description": 'uuu'
        }, {
            "title": 'point4',
            "lat": '1.350265',
            "lng": '103.985165',
            "description": 'uuu'
        }];
        var gmarkers = [];
        var colorVariable = ["yellow", "green", "red", "saffron","yellow", "green", "red","yellow", "green", "red"];
        var map;
        var degree = 0;
        function autoRotate() {
            var $elie = $("#dvMap");
            degree = degree + 65;
            rotate(degree);
            function rotate(degree) {
                // For webkit browsers: e.g. Chrome
                $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
                $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
                $elie.css({ '-ms-transform': 'rotate(' + degree + 'deg)'});
                $elie.css({ '-o-transform': 'rotate(' + degree + 'deg)'});

                for (var i= 0; i < gmarkers.length; i++) {
                    gmarkers[i].setIcon(icon48.png("red", -degree));
                }
            }
        }
        window.onload = function() {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 18,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                heading: 90,
                tilt: 45,
                styles: [
                    {
                        "featureType": "poi",
                        "stylers": [
                            { "visibility": "off" }
                        ]
                    }
                ]
            };

            map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var infoWindow = new google.maps.InfoWindow();
            var lat_lng = new Array();
            var latlngbounds = new google.maps.LatLngBounds();
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                lat_lng.push(myLatlng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    icon:'icon48.png',
                    title: data.title
                });
                latlngbounds.extend(marker.position);
                (function(marker, data) {
                    google.maps.event.addListener(marker, "click", function(e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
                gmarkers.push(marker);
            }
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);


            //Loop and Draw Path Route between the Points on MAP
            for (var i = 0; i < lat_lng.length; i++) {
                var src = lat_lng[i];
                var des = lat_lng[i + 1];
                var k=i;
                i=i+1;
                getDirections(src, des, colorVariable[k], map);

            }
            autoRotate();
        }

        function getDirections(src, des, color, map) {
            //Intialize the Direction Service
            var service = new google.maps.DirectionsService();
            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function(result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    //Intialize the Path Array
                    var path = [];
                    for (var i = 0; i < result.routes[0].overview_path.length; i++) {
                        path.push(result.routes[0].overview_path[i]);
                    }
                    //Set the Path Stroke Color
                    var polyOptions = {
                        strokeColor: color,
                        strokeOpacity: 1.0,
                        strokeWeight: 8,
                        path: path,
                        map: map
                    }
                    poly = new google.maps.Polyline(polyOptions);
                    poly.setMap(map);

                }
            });
        }

        function pinSymbol(color, rotation) {
            return {
                path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
                fillColor: color,
                fillOpacity: 1,
                strokeColor: '#000',
                strokeWeight: 1,
                rotation: rotation,
                scale: 1
            };
        }
    </script>
</head>
<body>
<div id="dvMap" style="width:1000px;height:1000px"></div>
</body>
</html>

有人可以说一下如何用一个具有相同元素的json替换代码中的markers数组，为了使用json而不是数组作为输入，我需要做的所有更改

Answer 1

将您的JSON更改为有效（将'更改为"），使用jsonlint.com进行验证。
将其保存在一个单独的文件中（在您将显示该网页的同一域中的服务器上）。
（一个选项）使用JQuery's loadJSON方法加载JSON（因为你已经包含了JQuery）。
```
var jqxhr = $.getJSON("markers.json.txt", function( data, status, jXLR ) {
```
处理加载的JSON，显示标记和折线。删除“markers”数组中地图中心的依赖关系，不再存在。

working example

如何将json有效负载提供给谷歌地图api而不是数组

1 个答案: