使用 ionic 3 在 Google 地图上制作用户可编辑的多边形

Question

当我的标记放在地图上时，我只得到法线多边形线。

• @ionic/cli-utils : 1.19.2
• 离子（离子 CLI）：3.20.0

全局包：

cordova (Cordova CLI) : 8.0.0

本地包：

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2

系统：

Android SDK Tools : 26.1.1
Node              : v8.10.0
npm               : 5.6.0
OS                : Windows 10

环境变量：

ANDROID_HOME : C:\Users\w2s-pc\AppData\Local\Android\Sdk

杂项：

backend : pro

---

代码：

 import { NavController } from 'ionic-angular';
 import{LatLng,GoogleMaps,GoogleMap,GoogleMapsEvent,GoogleMapOptions,
 CameraPosition,MarkerOptions,Polyline,Polygon,PolygonOptions,
 Spherical,Marker} from '@ionic- native/google-maps';
 import { Component } from "@angular/core/";
 import { Geolocation } from '@ionic-native/geolocation';


 @Component({
 selector: 'home',
 templateUrl: 'home.html'
 })

 export class HomePage {
 map: GoogleMap;
 me: any;
 locations = []

 constructor() { }

 ionViewDidLoad() {
 this.loadMap();
}

  loadMap() {

  let mapOptions: GoogleMapOptions = {
  // camera: {
  //   target: {
  //     lat: this.me._x,
  //                  lng: this.me._y
  //   },

  //   zoom: 18,
  //   tilt: 30,
  // },
  MyLocation:true,
  MyLocationButton:true,
   disableDefaultUI: true,
  mapType: "MAP_TYPE_HYBRID",


};


  let map= this.map = GoogleMaps.create('map_canvas', mapOptions);

// var div = document.getElementById("map_canvas");
// var map = new GoogleMaps()



// Wait the MAP_READY before using any methods.
this.map.on(GoogleMapsEvent.MAP_READY)
  .subscribe(() => {
    console.log('Map is ready!');


    this.map.setMyLocationEnabled(true)

    this.map.setMyLocationButtonEnabled(true)




    this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe((location: any) => {

      console.log(location);


      this.locations.push(new LatLng(location[0].lat, location[0].lng));



      console.log(location);

      let PolyLineInfo;



       this.map.addPolygon({
           'points' : this.locations , 
           'strokeColor'  :  '# AA00FF' ,  
           'fillColor'  :  '# 00FFAA' , 
           'strokeWidth' :  4 ,
           'editable' :true,
      }).then((info: Polyline) => {

        // info.setPoints
        PolyLineInfo = info;


      }

      );


      this.map.addMarker({

        animation: 'DROP',
        draggable: true,

        position: {
          lat: location[0].lat,
          lng: location[0].lng,
        },
        customInfo: this.locations.length - 1
      })
        .then(marker => {

          marker.on(GoogleMapsEvent.MARKER_DRAG_END)
            .subscribe((marker) => {

              let index = marker[1].get("customInfo");


              this.locations[index] = new LatLng(marker[0].lat, marker[0].lng);


              PolyLineInfo.remove();

              console.log(this.locations[0]);
              console.log(this.locations[1]);
              console.log(this.locations[2]);



                                let dis = Spherical.computeSignedArea(this.locations);

                                      console.log(dis);
                                let km = Spherical.computeLength(this.locations);
                                     console.log(km);

              this.map.addPolygon({
                      'points' : this.locations , 
                      'strokeColor'  :  '# AA00FF' ,  
                      'fillColor'  :  '#FF0000' , 
                      'strokeWidth' :  4 ,
                      'editable' :true,
              }).then((info: Polyline) => {

                PolyLineInfo = info;
              }

              );



         });


        })
    });  

   });


   }
  } 

---

i need to do like this using ionic version 3 on Google Map

Answer 1

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/class/Polygon/getPoints/README.md

var GORYOKAKU_POINTS = [
  {lat: 41.79883, lng: 140.75675},
  {lat: 41.799240000000005, lng: 140.75875000000002},
  {lat: 41.797650000000004, lng: 140.75905},
  {lat: 41.79637, lng: 140.76018000000002},
  {lat: 41.79567, lng: 140.75845},
  {lat: 41.794470000000004, lng: 140.75714000000002},
  {lat: 41.795010000000005, lng: 140.75611},
  {lat: 41.79477000000001, lng: 140.75484},
  {lat: 41.79576, lng: 140.75475},
  {lat: 41.796150000000004, lng: 140.75364000000002},
  {lat: 41.79744, lng: 140.75454000000002},
  {lat: 41.79909000000001, lng: 140.75465}//,
  //{lat: 41.79883, lng: 140.75673}
];

var mapDiv = document.getElementById("map_canvas");

// Create a map with specified camera bounds
var map = plugin.google.maps.Map.getMap(mapDiv, {
  camera: {
    target: GORYOKAKU_POINTS
  }
});
map.addEventListener(plugin.google.maps.event.MAP_READY, function() {

  addEditablePolygon(map, GORYOKAKU_POINTS, function(polygon) {

    // To do something...

  });

});

function addEditablePolygon(map, points, callback) {

  // Add a polygon
  map.addPolygon({
    'points': points,
    'strokeColor' : '#AA00FF',
    'fillColor' : '#00FFAA',
    'width': 10
  }, function(polygon) {

    // polygon.getPoints() returns an instance of the BaseArrayClass.
    var mvcArray = polygon.getPoints();

    // Add draggable markers
    mvcArray.map(function(latLng, cb) {
      map.addMarker({
        position: latLng,
        draggable: true
      }, cb);
    }, function(markers) {

      // If a marker is dragged, set the position of it to the points of the Polygon.
      markers.forEach(function(marker, idx) {
        marker.on(plugin.google.maps.event.MARKER_DRAG, function(position) {
          mvcArray.setAt(idx, position);
        });
      });

      callback(polygon);
    });
  });

}