1、index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"/>

    <title>test_bus_station</title>

  </head>

  <body>

    <div id="app"></div>

    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

  </body>

</html>

2、vue界面

<template>

  <div>

    <div id="mapid"></div>

  </div>

</template>

<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

<script>

export default {

  name: 'BusStation',

  data () {

    return {

      map: null

    }

  },

  mounted () {

    this.map = L.map('mapid').setView([36.49771311230842, 109.45744048529967], 13)

    // 加载谷歌地图

    L.tileLayer('http://mt0.google.cn/vt/lyrs=m@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga', {

      attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

    }).addTo(this.map)

    // 加载高德地图

    // L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8', {

    //   subdomains:"1234"

    // }).addTo(this.map)

    // 在地图上添加标记
    L.marker([data.lat, data.lng]).addTo(this.map)
    // 在地图上画圆圈
     L.circle([data.lat, data.lng], {
           color: 'red',
           fillColor: '#f03',
           fillOpacity: 0.5,
           radius: 3
        }).addTo(this.map)
     }
}

</script>

<style scoped>

#mapid { height: 1080px; }

</style>

　　

vue+leaflet的更多相关文章

  1. 基于vue+leaflet+echart的足迹分享评论平台

    (其实题目是随便取的,目的只是用来证明Vue+leaflet+springboot技术栈的可行性) 效果 小专栏不支持上传视频?想看的话可以去我的知乎看最新的文章,那个应该可以.在这里 主要功能描述 ...

  2. 记vue+leaflet的一次canvas渲染爆栈

    背景: 在地图上绘制大量的circleMarker,leaflet能选择使用canvas来渲染,比起默认的svg渲染来说在大量绘制的情况下会更加流畅.但当触发其中某一个circleMarker的too ...

  3. 如何在VUE中使用leaflet地图框架

    前言:在leaflet的官方文档只有静态的HTML演示并没有结合VUE的demo  虽然也有一些封装好的leaflet库例如Vue-Leaflet,但是总感觉用起来不是那么顺手,有些业务操作还是得用l ...

  4. vue 实现 leaflet的测绘，测距，测面

    参考1:https://blog.csdn.net/lonly_maple/article/details/83658608 参考2:https://blog.csdn.net/xtfge0915/a ...

  5. 【GIS】Vue、Leaflet、highlightmarker、bouncemarker

    感谢: https://github.com/brandonxiang/leaflet.marker.highlight https://github.com/maximeh/leaflet.boun ...

  6. Vue.js使用Leaflet地图

    参考:https://blog.csdn.net/Joshua_HIT/article/details/72860171 vue2leaflet的demo:https://github.com/KoR ...

  7. VUE2 项目 引入 leaflet.draw全过程

    leaflet.draw的参考文档:http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html   这个网址不稳定,多刷新几 ...

  8. Angular + Leaflet 实现房源数据可视化(附github源码)

    这是什么?租房信息展示平台 宏观的租房数据可视化微观的房源信息展示多条件搜索等等 链接地图搜租房​ 来龙去脉 受 @李国宝 的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息系统方面的 ...

  9. Leaflet 调用百度瓦片地图服务

    在使用 leaflet 调用第三方瓦片地图服务的项目,主要谷歌地图.高德地图.百度地图和 OSM 地图,与其他三种地图对比,百度地图的瓦片组织方式是不同的.百度从中心点经纬度(0,0)度开始计算瓦片, ...

随机推荐

  1. MySQL之字段数据类型和列属性

    数据类型: 对数据进行统一的分类,从系统的角度出发,为了能够使用统一的方式进行管理,更好的利用有限的空间. SQL中将数据类型分成了三大类:数值类型.字符串类型.时间日期类型. 数值型: 数值型数据: ...

  2. element上传功能携带参数

    在写element的上传功能时,需要对上传的文件携带参数,但是参数比较多,就需要一个对象合并的方法,Object.assign() Object.assign(target, source1, sou ...

  3. 缓存利器、Lua模块下的共享内存

    上一节讲到了worker进程的共享内存,它利用丰富的指令使数据的缓存操作变得非常简单,但它也存在一些缺点. 1．worker进程之间会有锁竞争,在高并发的情况下会增加性能开销.2．只支持Lua布尔值. ...

  4. 搭建NFS Server

    搭建NFS Server Kubetrain K8S在线直播培训,内推机会 不满意可无条件退款 现在就去广告 #背景 Kubernetes 对 Pod 进行调度时,以当时集群中各节点的可用资源作为主要 ...

  5. Android中Activity的启动模式和使用场景

    一.为什么需要启动模式 在Android开发中,我们都知道,在默认的情况下,如果我们启动的是同一个Activity的话,系统会创建多个实例并把它们一一放入任务栈中.当我们点击返回(back)键,这些A ...

  6. jquery判断radio是否选中

    微交易-实体系统 微交易-虚拟系统   <div class="system"> <div class="systemt"> <l ...

  7. PythonFile对象的属性

    PythonFile对象的属性: 一个文件被打开后,使用对象进行接收,接收的对象即为 File 对象 示例: ''' file.closed 返回true如果文件已被关闭,否则返回false file ...

  8. PHP 基础语法介绍

    PHP 语法 PHP 脚本在服务器上执行,然后将纯 HTML 结果发送回浏览器. 基本的 PHP 语法 PHP 脚本可以放在文档中的任何位置. PHP 脚本以 <?php 开始,以 ?>  ...

  9. Pytest单元测试框架-学习

    pytest: Python的一个单元测试框架,基于UnitTest二次开发,语法上更加简洁,可以用来做Python开发项目的单元测试,UI自动化.接口自动化测试等,有很多的插件访问Pytest插件汇 ...

  10. Python生成测试数据-Faker(非LOL选手-李相赫)

    Faker介绍 官方文档:https://faker.readthedocs.io/en/master/ Faker is a Python package that generates fake d ...