Ionic基于浏览器JS地图API点击获取经纬度报错求助

Hey there! Let's tackle those two errors you're facing with your browser-based map API implementation. Both issues boil down to either using incorrect method names for your specific map API, or trying to interact with the map instance before it's properly initialized. Here's a breakdown of each problem and how to fix them:

1. "_this.map.on is not a function" Error #

This error pops up for one of two core reasons:

• Your this.map isn't a valid map instance: You might be calling on() before the map finishes initializing, or you've assigned the wrong value to this.map.
• Your map API doesn't use on() for event listeners: Different map libraries use distinct syntax for event handling (e.g., Google Maps relies on addListener() instead of on()).

Fixes: #

First, confirm your map instance is properly initialized. For example, if you're using Google Maps, create the map object before attaching listeners:

function initMap() {
  // Initialize the map first
  _this.map = new google.maps.Map(document.getElementById('your-map-element'), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12
  });

  // Use Google Maps' correct event listener method
  _this.map.addListener('click', (event) => {
    const latitude = event.latLng.lat();
    const longitude = event.latLng.lng();
    console.log(`Clicked coordinates: Lat ${latitude}, Lng ${longitude}`);
  });
}

If you're using Leaflet (which does support on()), double-check your initialization to ensure _this.map is a valid Leaflet map object:

function initMap() {
  _this.map = L.map('your-map-element').setView([37.7749, -122.4194], 12);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(_this.map);

  // Leaflet uses on() for events, so this works if the map is valid
  _this.map.on('click', (event) => {
    console.log(`Clicked coordinates: Lat ${event.latlng.lat}, Lng ${event.latlng.lng}`);
  });
}

2. "_this.map.setClickable is not a function" Error #

This error happens because your map API doesn't have a setClickable() method. Method names vary widely between libraries:

• Google Maps: Use setOptions() to toggle clickability
• Leaflet: Control interactivity via methods like dragging.disable() or adjust layer styles

Fixes: #

For Google Maps, replace setClickable() with setOptions():

// Enable clickability
_this.map.setOptions({ clickable: true });

// Disable clickability
_this.map.setOptions({ clickable: false });

For Leaflet, if you want to disable map interaction (clicks/drags), use:

// Disable dragging and click-based interactions
_this.map.dragging.disable();
_this.map.boxZoom.disable();
_this.map.doubleClickZoom.disable();

// Re-enable later if needed
_this.map.dragging.enable();

If you're targeting a specific layer (like a marker or polygon), adjust the layer's options directly:

const marker = L.marker([37.7749, -122.4194]).addTo(_this.map);
// Disable click on the marker
marker.options.clickable = false;
marker.setStyle({ clickable: false });

Key Takeaways #

• Always cross-reference your method names with your map API's official documentation—different libraries have unique syntax!
• Wait for the map to fully initialize before calling methods on it (use API load callbacks or async loading handlers if needed).

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