在Ionic 3中实现Google Maps可编辑多边形异常问题求助

Hey there! Let's fix that editable polygon issue in your Ionic 3 app. It sounds like your polygon is rendering as a static line instead of being editable—here's how to get those draggable vertices working:

First, Check the Core Polygon Configuration #

The most common culprit here is forgetting to enable the editable property when creating your Google Maps Polygon. This flag tells the map to render drag handles on each vertex so users can adjust the shape.

Here's how to properly initialize your polygon:

// Initialize your polygon with editable enabled
this.polygon = new google.maps.Polygon({
  paths: [], // Start with an empty path (we'll add markers later)
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  map: this.map, // Make sure you bind it to your map instance
  editable: true, // This is the key line for editability!
  draggable: false // Optional: set to true if you want to drag the whole polygon
});

Link Markers to the Polygon Path #

When you place markers on the map, you need to add their positions directly to the polygon's path array and update the polygon. Here's how to handle map clicks to add markers and update the shape:

// Listen for map clicks to add markers and expand the polygon
this.map.addListener('click', (event) => {
  // Add a draggable marker at the click position
  new google.maps.Marker({
    position: event.latLng,
    map: this.map,
    draggable: true // Let users adjust marker positions too
  });

  // Update the polygon's path with the new marker position
  const polygonPath = this.polygon.getPath();
  polygonPath.push(event.latLng);
});

Verify Map Initialization & API Setup #

Double-check these critical setup steps to avoid hidden issues:

• Wait for platform readiness: Always initialize your map inside platform.ready() to ensure Cordova/Android is fully loaded.
• Load Google Maps API correctly: In your index.html, make sure you're loading the API with your key:

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  

• Cordova permissions: Add these to your config.xml to ensure geolocation and map access work on Android:

  <plugin name="cordova-plugin-geolocation" spec="^4.0.1" />
  <allow-intent href="geo:*" />
  <access origin="https://maps.googleapis.com/*" />
  

Full Working Example Snippet #

Here's a complete component example to tie everything together:

import { Component, OnInit } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
declare var google: any;

@Component({
  selector: 'page-polygon-map',
  templateUrl: 'polygon-map.html'
})
export class PolygonMapPage implements OnInit {
  map: any;
  polygon: any;

  constructor(public navCtrl: NavController, private platform: Platform) {}

  ngOnInit() {
    this.platform.ready().then(() => {
      this.initializeMap();
    });
  }

  initializeMap() {
    const mapOptions = {
      center: new google.maps.LatLng(37.7749, -122.4194), // Replace with your default center
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Render the map in your HTML div
    this.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    // Initialize editable polygon
    this.polygon = new google.maps.Polygon({
      paths: [],
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: this.map,
      editable: true
    });

    // Add markers and update polygon on map click
    this.map.addListener('click', (event) => {
      new google.maps.Marker({
        position: event.latLng,
        map: this.map,
        draggable: true
      });

      this.polygon.getPath().push(event.latLng);
    });
  }
}

And the corresponding HTML:

<ion-content>
  <div id="map" style="width: 100%; height: 100vh;"></div>
</ion-content>

After implementing this, your polygon should show small drag handles on each vertex when you add markers, letting users edit the shape freely.

内容的提问来源于stack exchange，提问作者Yuvi Yuvan