Question

这是我与osm一起使用的代码。我能够显示标记，但我无法显示和编辑geojson多边形。我有谷歌api键。是否可以使用谷歌地图？这是plunker。

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Draw</title>

    <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.css" />
    <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/leaflet.draw.css" />

    <!--[if lte IE 8]>
        <link rel="stylesheet" href="lib/leaflet/leaflet.ie.css" />
        <link rel="stylesheet" href="leaflet.draw.ie.css" />
    <![endif]-->

    <script src="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.js"></script>
    <script src="https://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
        </div>
    <script>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
            map = new L.Map('map', {layers: [osm], center: new L.LatLng(-37.7772, 175.2756), zoom: 12});

        var drawnItems = new L.FeatureGroup();
        map.addLayer(drawnItems);

        var drawControl = new L.Control.Draw({
            draw: {
                position: 'topleft',
                polygon: {
                    title: 'Draw a sexy polygon!',
                    allowIntersection: false,
                    drawError: {
                        color: '#b00b00',
                        timeout: 1000
                    },
                    shapeOptions: {
                        color: '#bada55'
                    },
                    showArea: true
                },
                polyline: {
                    metric: false
                },
                circle: {
                    shapeOptions: {
                        color: '#662d91'
                    }
                }
            },
            edit: {
                featureGroup: drawnItems
            }
        });

         $scope.geojsonFeatures =  {
    "type": "FeatureCollection",
    "features":[
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          175.2756,
          -37.7772
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              175.27364730834958,
              -37.77322501372662
            ],
            [
              175.27849674224854,
              -37.776617142149554
            ],
            [
              175.28351783752439,
              -37.784486280685925
            ],
            [
              175.28879642486572,
              -37.781365860467126
            ],
            [
              175.2824878692627,
              -37.7707486617024
            ],
            [
              175.27364730834958,
              -37.77322501372662
            ]
          ]
        ]
      }
    }
  ]};

        map.addControl(drawControl);
        map.on('draw:created', function (e) {
            var type = e.layerType,
                layer = e.layer;

            if (type === 'marker') {
                layer.bindPopup('A popup!');
            }

            drawnItems.addLayer(layer);
            var geoPoints = layer.toGeoJSON();
            console.log(geoPoints);
        });



        map.on('draw:edited', function (e) {
            var layers = e.layers;
            layers.eachLayer(function (layer) {
                var geoPoints = layer.toGeoJSON();
                console.log(geoPoints);
            });
        });

        map.on('draw:deleted', function (e) {
            var layers = e.layers;
            layers.eachLayer(function (layer) {
                var geoPoints = layer.toGeoJSON();
                console.log(geoPoints);
            });
        });



            L.geoJson($scope.geojsonFeatures, {
              onEachFeature: onEachFeature
            }); 


    function onEachFeature(feature, layer) {
      drawnItems.addLayer(layer);
    }
});
    </script>
</body>
</html>

如何在Leaflet中使用Google地图？

0 个答案: