码迷,mamicode.com
首页 > 其他好文 > 详细

vue 引入 leaflet1.4.0

时间:2019-05-04 22:30:55      阅读:452      评论:0      收藏:0      [点我收藏+]

标签:nbsp   设置   install   his   style   apt   引入   javascrip   attribute   

安装leaflet

npm install leaflet --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

标签:nbsp   设置   install   his   style   apt   引入   javascrip   attribute   

原文地址:https://www.cnblogs.com/yingyigongzi/p/10810110.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!