初始化一个vue项目

vue init webpack leafeltDemo
cnpm install

在 vue 中安装 Leaflet

cnpm install leaflet --save

在main.js中引入leaflet

leaflet 包安装成功之后，需要在 Vue 工程中将它引入至工程。

import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'
Vue.L = Vue.prototype.$L = L

加载一个简单的地图框架

在HelloWorld.vue中

创建地图对象；

<template><div id="map"></div>
</template><script>
export default {name: 'HelloWorld',data () {return {map : null}},mounted() {this.map = L.map("map",{center: L.latLng(23.140833538081456, 113.30564975738527),zoom: 16,maxZoom:18})}
}
</script>
<style scoped>
#map{width:100%;height:calc(100vh)
}</style>

地图对象创建成功之后，则可以看到如下图所示的地图视图窗口：

3. 加载一个高德地图服务

 L.tileLayer("http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",{subdomains: ["1", "2", "3", "4"],attribution: "高德"}).addTo(map);

添加一个或多个Marker

添加一个marker
引入标记点图片
import markerIcon from “…/assets/leaflet/marker-icon.png”;
import redMarker from “…/assets/leaflet/red-marker.png”;

 var blueIcon = L.icon({iconUrl:markerIcon,iconSize: [25, 41],iconAnchor: [13, 21]})var marker = L.marker([23.140833, 113.305649],{icon:blueIcon,// draggable:true,riseOnHover:true}).addTo(map).bindPopup("我是单个marker").openPopup()

3. 添加多个标记点
方法一：

 var latlng = [{lat:23.140833,lng:113.305649},{lat:23.138604,lng:113.306835},{lat:23.138535,lng:113.305821}]var group = L.layerGroup().addTo(map)for (let i = 0; i < latlng.length; i++) {var lat = latlng[i].latvar lng = latlng[i].lngvar blueIcon = L.icon({iconUrl:markerIcon,iconSize: [25, 41],iconAnchor: [13, 21]})var marker = L.marker([lat, lng],{icon:blueIcon,// draggable:true,// riseOnHover:true}).addTo(group).bindPopup('我是第'+i+"个marker").openPopup()}

方法二

 var latlng2 = [{lat:23.140834,lng:113.305319},{lat:23.138004,lng:113.306865},{lat:23.138535,lng:113.304931}]var layers = [];for (let i = 0; i < latlng2.length; i++) {var redIcon = L.icon({iconUrl:redMarker,iconSize: [25, 41],iconAnchor: [13, 21]})var layer = new L.marker([latlng2[i].lat,latlng2[i].lng],{icon:redIcon});layers.push(layer)}var myGroup = L.layerGroup(layers)map.addLayer(myGroup);

显示所有标记点

vue2中使用Leaflet实现单个或多个marker图标相关推荐

leaflet 单个或者多个marker图标切换清除
原文地址 https://xiegaosheng.com/post/view?id=74 leaflet.js中清除marker图标,切换marker位置查看官方文档单个marker点的位置切换直接 ...
【CMake】Android Studio 中使用 CMake 编译单个 C++ 源文件 ( 常用的 CMake 命令解析 )
文章目录一.Android Studio 中使用 CMake 编译单个 C++ 源文件二.cmake_minimum_required 命令设置最小 CMake 版本三.project 命令设置 ...
Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
Leaflet中使用awesome-markers插件显示带图标的marker
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,实现Marker上带图标 ...
vue2中vant实现网易云音乐案例-附带所有源码
vue2中vant实现网易云音乐案例-附带所有源码前言学习笔记以及源码下载gitee: https://gitee.com/xingyueqianduan/vantmsicdemo 下载下来的内容 ...
vue2中使用axios，以及axios拦截器的配置
目录一.vue2项目中如何实现异步请求 1.axios:是一个基于Promise的网络请求库.既可以在node.js(服务器端)使用,也可以在浏览器端使用 2.vue中的使用方法 (2)引用方法 ...
vue2 通过 axios 访问koa2,从mysql 拿到数据更新vue2中的内容
vue2 通过 axios 访问koa2,从mysql 拿到数据更新vue2中的内容 axios 类似ajax 注意红色字体 node --inspect index.js (启用debug模式) ...
vue2中，使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件
vue2中,使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件 Vite 官方中文文档--https://cn.vitejs.dev/ vite-plugin-vue2包 ...
在vue2中使用vue3的核心功能（渐进式升级vue版本）
一.前言学了真香的vue3语法,但目前的vue2项目中短期内不会再升级了,空有屠龙之术无法施展?来试试以下的解决方案,让你在vue2项目中也能用上vue3的核心语法-组合式API. 二.选项式API ...

vue2中使用Leaflet实现单个或多个marker图标

vue2中使用Leaflet实现单个或多个marker图标

初始化一个vue项目

在 vue 中安装 Leaflet

在main.js中引入leaflet

加载一个简单的地图框架

添加一个或多个Marker

vue2中使用Leaflet实现单个或多个marker图标相关推荐

最新文章

热门文章