android 高德地图 marker点击无效_从零开始，构建电子地图网站：0_13_VUE整合leaflet...

一.效果图

我们大概要做这样的地图底图，腾讯底图，上面覆盖物有点point和面polygon，点击覆盖物会出现触发事件。

页面长成这个样子，因为仅作示例用，所以写在了helpdocument上面，除了地图外，覆盖物有一个点、一个标签、一个面，右侧是chrome浏览器的开发者工具（crtl+shift+i），触发事件在工具上（console）打印了日志。

二.安装leaflet模块

首先要安装leaflet模块。

Ctrl+c，退出dev界面。

运行：

npm install vue2-leaflet -S

npm install leaflet -S

三.加载腾讯底图

1.瓦片原理

Leaflet加载底图以栅格瓦片的形式加载。

官方示例是这样的：

L.tileLayer('https://{s}.http://tile.openstreetmap.org/{z}/{x}/{y}.png', {

attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>