ionic 使用 Leaflet，click事件失效

Posted 2023-04-23

参考技术A 项目需求：使用Ionic1做混合App开发，使用Leaflet提供地图服务
遇到问题：地图上的click事件在Ionic App中不生效，在浏览器（PC和移动端）都可以

通过在Leaflet的github Issue 上搜索，有人遇到类似问题，解决方案是在地图的容器上加属性data-tap-disabled="true"，如下：

通过加这个属性，我的问题也解决了。后面查了一下ionic.bundle.js源码，其中2624行开始的注释有解释，Ionic Tap System 与 Google Map 和 Leaflet Maps等有touch detection system的第三方库有冲突，为解决这个冲突，可以禁用Ionic Tap System：

学习 leaflet-2

      接着是处理事件

      例子是用户点击地图，导致地图触发‘click‘事件

map.on(‘click‘, function(e) {
    alert(e.latlng);
} );

      Leaflet通过引用来处理事件侦听器，因此如果您想要添加侦听器并将其删除，请将其定义为一个函数：

function onClick(e) { ... }
map.on(‘click‘, onClick);
map.off(‘click‘, onClick);

     这里我们可以写成：

function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}

mymap.on(‘click‘, onMapClick);

      监听器函数的第一个参数是一个事件对象 - 它包含有关发生事件的有用信息。例如，地图点击事件对象（e在上例中）具有latlng属性，该属性是发生点击的位置。

      改进一下示例  点击地图，你会看到弹出的坐标：

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}

mymap.on(‘click‘, onMapClick);

     进入新的阶段--------------------------------------------------------------------------------------------------********

     针对iPhone，iPad或Android手机等移动设备调整的全屏地图，以及如何轻松检测并使用当前用户位置。

     准备新的页面，像前面那个页面一样引入css和js

     这里我们需要告诉移动浏览器禁用不必要的页面缩放，并通过在headHTML部分或HTML页面中放置以下行来将其设置为实际大小

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

     并且为了使我们的地图div元素延伸到所有可用空间（全屏），我们可以使用下面的CSS代码

body {
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 100%;
    width: 100vw;
}

      初始化地图并且获取地图，像上一个页面一样

 var map = L.map(‘map‘).fitWorld();
          map.locate({setView: true, maxZoom: 16});
          L.tileLayer(‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY3JhbGxlciIsImEiOiJjamdib3VwZ2kxN25kMzNtcXluaGowOXNmIn0.aPgP5OMOI0P4SU1OnN5i_Q‘, 
        {
    attribution: ‘Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ? <a href="http://mapbox.com">Mapbox</a>‘,
    maxZoom: 18,
    id: ‘mapbox.streets‘
}).addTo(map);

   这里的mapid是我的 也可以自己申请

   地理位置获取：locate  用于将地图视图缩放到检测到的位置 

map.locate({setView: true, maxZoom: 16});

    在自动设置地图视图时，我们在此指定16作为最大缩放。只要用户同意共享位置并且浏览器检测到该位置，地图就会将视图设置为该位置。

    locationfound和locationerror事件：

    locationfound：在检测到的位置添加一个标记，通过locationfound在locateAndSetView调用之前向事件添加一个事件监听器来显示弹出窗口中的准确性：

function onLocationFound(e) {
    var radius = e.accuracy / 2；
    L.marker(e.latlng).addTo(map)
        .bindPopup("You are within " + radius + " meters from this point").openPopup();
    L.circle(e.latlng, radius).addTo(map);
}
map.on(‘locationfound‘, onLocationFound);

     但是，如果地理位置失败，则显示错误消息也会很好：

function onLocationError(e) {
    alert(e.message);
}
map.on(‘locationerror‘, onLocationError);

      如果您将setView选项设置为true并且地理位置失败，则会将视图设置为全局。

      下一个示例------------------------------------------------------------------------------------------------------****

      自定义图标的标记

      定义自己的图标以供放置在地图上的标记使用。

      要制作自定义图标，我们通常需要两个图像 - 实际图标图像和其阴影图像。

      创建图标：

      Leaflet中的标记图标由L.Icon对象定义，在创建标记时作为选项传递。先创建一个黄色的叶子图标：

var yellowIcon = L.icon({
    iconUrl: ‘http://leafletjs.com/examples/custom-icons/leaf-orange.png‘,
    shadowUrl: ‘http://leafletjs.com/examples/custom-icons/leaf-shadow.png‘,

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker‘s location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

      在地图上放此标记：

L.marker([51.5,0.09],icon:{yellowIcon}).addTo(map)

     定义一个图标类：

     如果我们需要创建多个共同点的图标呢？那就要我们自己定义自己的包含共享选项的图标类，继承自L.Icon！

var LeafIcon = L.Icon.extend({
    options: {
        shadowUrl: ‘leaf-shadow.png‘,
        iconSize:     [38, 95],
        shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
    }
});

      现在可以从这个类中创建所有三个叶子图标并使用它们:

var greenIcon = new LeafIcon({iconUrl: ‘leaf-green.png‘}), 
    redIcon = new LeafIcon({iconUrl: ‘leaf-red.png‘}), 
    orangeIcon = new LeafIcon({iconUrl: ‘leaf-orange.png‘});

     最终在地图上放置一些带有这些图标的标记:

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([51.495, -0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
L.marker([51.49, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");

ok 图标放置完成