安装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. python使用笔记14--商品管理小练习

    1 import json 2 import pymysql 3 IP = '127.0.0.1' 4 PORT = 3306 5 USER_NAME = 'root' 6 PASSWORD = '1 ...

  2. 第一篇 -- Go环境的搭建以及Hello World程序编写

    VS Code的下载和安装 1. 下载链接(本人下载版本VSCodeUserSetup-x64-1.57.0.exe) https://code.visualstudio.com/download 友 ...

  3. Windows10 64位解决无法使用Microsoft.Jet.OLEDB.4.0的方法

    本机软件环境:Windows10 64位+Office2003 (32位) ============================================= 1.下载 ACE2010的驱动, ...

  4. docker exec 参数详解

    Usage: docker exec [OPTIONS] CONTAINER COMMAND [ARG...] Run a command in a running container Options ...

  5. maven 标签 关于<import>标签

      标签用途:在dependecyManagement元素下用,合并此import标签上级dependency的groupId和artid中指向依赖的dependecyManagement内容   标 ...

  6. Spring Cloud专题之五:config

    书接上回: SpringCloud专题之一:Eureka Spring Cloud专题之二:OpenFeign Spring Cloud专题之三:Hystrix Spring Cloud 专题之四:Z ...

  7. GC Roots包含哪些

    1.虚拟机栈中引用的对象 2.方法区中静态属性.常量引用的对象 3. 本地方法栈中引用的对象 4. 被Synchronized锁持有的对象 5. 记录当前被加载类的SystemDictionary 6 ...

  8. php 随机生成字符串

    private function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJK ...

  9. JVM的内存管理机制-转载

    JVM的内存管理机制 一.JVM的内存区域 对于C.C++程序员来说,在内存管理领域,他们既拥有每一个对象的"所有权",又担负着每一个对象生命开始到终结的维护责任. 对Java程序 ...

  10. 最全总结 JavaScript Array 方法详解

    JavaScript Array 指南.png Array API 大全 (公众号: 前端自学社区).png 前言 我们在日常开发中,与接口打交道最多了,前端通过访问后端接口,然后将接口数据二次处理渲 ...