使用 gmaps.js 放置来自 geoJSON 文件的标记

Question

我需要使用 gmaps.js 从 .json 文件中获取标记信息并在我的本地 html 页面上显示标记位置。

我已经能够使用此处给出的示例使用标准 Google 地图平台 API 成功完成此操作： https://developers.google.com/maps/documentation/javascript/importing_data

我的 geojson 文件的格式与上例中的格式相同。但是我想使用 gmaps.js 因为它简单易用。上面的代码如何适应并与 gmaps.js 一起使用？

到目前为止，这是我最基本的代码：

var mapObj = new GMaps({
  el: '#map',
  lat: 30.267283,
  lng: -90.554560,
  zoom: 2, 
  minZoom: 2 
})

/*attempting to place markers from geojson file*/

/*managed to add markers manually*/
mapObj.addMarker({
  lat: 30.267283,
  lng: -90.554560,
  title: 'Marker with InfoWindow',
  infoWindow: {
    content: '<p>HI!</p>'
  },
  click: function(e) {
    mapObj.map.panTo(e.position);
  }
});

我尝试使用：https://hpneo.dev/gmaps/examples/json.html

但是我的网页似乎显示为空白屏幕。

Answer 1

Working with JSON works fine; you just need to modify it based off of your own JSON file. If it looks like the one from Google's documentation 上的 gmaps 示例，然后您可以直接使用 getJSON 加载它，就像 gmaps.js 那样。

查看 this jsbin 以获取演示和指导。完整代码如下。希望对您有所帮助！

<!DOCTYPE html>
<html>

<head>
    <style>
        #map {
            height: 100%;
        }

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key="></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.js"></script>

    <script>
        var map;

        function loadResults(data) {
            var markers_data = [];

            for (var i = 0; i < data.features.length; i++) {
                var coords = data.features[i].geometry.coordinates;
                markers_data.push({
                    lat: coords[1],
                    lng: coords[0],
                    infoWindow: {
                        content: '<p>HI!</p>'
                    },
                    click: function(e) {
                        map.map.panTo(e.position);
                    }
                });
            }
            map.addMarkers(markers_data);

        }

        $(document).on('click', '.pan-to-marker', function(e) {
            e.preventDefault();

            var position, lat, lng, $index;

            $index = $(this).data('marker-index');

            position = map.markers[$index].getPosition();

            lat = position.lat();
            lng = position.lng();

            map.setCenter(lat, lng);
        });

        $(document).ready(function() {
            map = new GMaps({
                el: '#map',
                lat: 30.267283,
                lng: -90.554560,
                zoom: 2,
                minZoom: 2
            });

            map.on('marker_added', function(marker) {
                var index = map.markers.indexOf(marker);
                if (index == map.markers.length - 1) {
                    map.fitZoom();
                }
            });

            var xhr = $.getJSON('https://api.myjson.com/bins/11fqjv');
            xhr.done(loadResults);
        });
    </script>
</body>

</html>

使用 gmaps.js 放置来自 geoJSON 文件的标记

Using gmaps.js to place markers from geoJSON file

html

javascript

google-maps

geojson

gmaps.js