使用gmaps.js從geoJSON文件放置標記

Question

我需要使用gmaps.js從.json文件中獲取標記信息，並在本地html頁面上顯示標記位置。

我可以使用以下示例通過標准Google Maps Platform 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

有關使用JSON的gmaps示例工作正常； 您只需要根據自己的JSON文件進行修改。 如果它看起來像Google文檔中的那個，則可以像gmaps.js一樣直接使用getJSON加載它。

看一下這個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文件放置標記

問題描述

1 個解決方案

解決方案1
0 已采納 2019-08-10 09:23:27

使用gmaps.js從geoJSON文件放置標記

問題描述

1 個解決方案

解決方案1 0 已采納 2019-08-10 09:23:27

解決方案1
0 已采納 2019-08-10 09:23:27