安装leaflet

cnpm install leaflet@~1.4.0 --save
// 在main.js 中设置如下

//引入样式文件
import 'leaflet/dist/leaflet.css'
<template>
<div id="map"> </div>
</template> <script>
import * as L from 'leaflet'
//Vue.L = Vue.prototype.$L = L var map;
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted() {
map = L.map('map',{
center: [31.87, 120.55],
zoom: 13
});
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);
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
width: 100%;
height: calc(100vh);
}
</style>

  

vue 引入 leaflet1.4.0的更多相关文章

  1. Vue 引入ElementUI 2.0.11:依赖未发现的问题

    转自:https://blog.csdn.net/cslucifer/article/details/79019649

  2. 《转》vue更新到2.0之后vue-resource不在更新,axios的使用

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...

  3. vue学习记录:vue引入,validator验证,数据信息,vuex数据共享

    最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...

  4. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  5. 解决Vue引入百度地图JSSDK:BMap is undefined 问题

    百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...

  6. 16、vue引入echarts,划中国地图

    vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...

  7. sass之mixin的全局引入(vue3.0)

    sass之mixin的全局引入(vue3.0) 1.scss文件(mixin.scss) /* 渐变 */ @mixin gradual($color, $color1){ background: $ ...

  8. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  9. vue mand-mobile按2.0文档默认安装的是1.6.8版本

    vue mand-mobile按2.0文档默认安装的是1.6.8版本 npm list mand-mobilebigbullmobile@1.0.0 E:\webcode\bigbullmobile` ...

随机推荐

  1. Ubuntu20.4 bs4安装的正确姿势

    一.背景 公司一小伙子反馈在内网机器上通过代理,还是安装不了bs4:于是乎,作为菜鸡的我开始排查.一直认为是网络和代理问题,所以关注点一直放在网络和安装包上:在网上搜索到,主要是以下问题: 1)更新a ...

  2. SQLITE数据库不支持远程访问

    SQLITE数据库不支持远程访问 import sqlite3 conn=sqlite3.connect("dailiaq.db") cur=conn.cursor() def c ...

  3. ASP.NET 检测当前计算机及登录用户名

    TextBox1.Text = System.Security.Principal.WindowsIdentity.GetCurrent().Name;

  4. dataX windows10安装

    按照视频课程,从Github上下载文件:https://github.com/alibaba/DataX 然后将下载的压缩包解压即可,不过需要的前提Python环境是要求python2,于是在pyth ...

  5. 【LeetCode】523. 连续的子数组和

    523. 连续的子数组和 知识点:数组:前缀和: 题目描述 给你一个整数数组 nums 和一个整数 k ,编写一个函数来判断该数组是否含有同时满足下述条件的连续子数组: 子数组大小 至少为 2 ,且 ...

  6. SSM中如何上传图片

    1.文件配置 2.jsp页面 文件的name值不能跟数据库列名一致 3.控制层收集数据转发到逻辑层 4.逻辑层处理把用户信息存到数据库 5.注册成功后跳到jsp页面进行展示

  7. Vue--el-menu 的自动跳转功能与自己的click事件冲突

    一\先看elementUI说明 项目实际 此时点击活导航时以 index 作为 path 进行路由跳转 那么此时不要onclik事件了 如果此时有在有click 就

  8. Elasticsearch(9300、9200)未授权访问

    下载地址https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.5.0.zip 检测 http://localhost ...

  9. xss常见方式

    1.<script>alert(1)</script> 2.源码第一个,[<]被转义,因此在第二个里 "><script>alert(1)&l ...

  10. JAVA基础语法:java编程规范和常用数据类型(转载)

    JAVA基础语法:java编程规范和常用数据类型 摘要 本文主要介绍了最基本的java程序规则,和常用数据类型,其中侧重说了数组的一些操作. 面向java编程 java是纯面向对象语言,所有的程序都要 ...