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. ThinkPHP6 核心分析之Http 类跟Request类的实例化

    以下源码分析,我们可以从 App,Http 类的实例化过程,了解类是如何实现自动实例化的,依赖注入是怎么实现的. 从入口文件出发 当访问一个 ThinkPHP 搭建的站点,框架最先是从入口文件开始的, ...

  2. 使用jwt进行token认证

    简单说明:最近在搞权限这一块的东西,需要用到jwt进行token认证,才有了如下的demo演示   具体细节可以看gitbug,噗,不是bug是hub  github地址:https://github ...

  3. findViewByid一定要放在setContentView(R.layout.a..)之后

    findViewByid一定要放在setContentView(R.layout.a..)之后否则还没布局,根本找不到这些控件setContentView(R.layout.activity_inpu ...

  4. 深入探究JVM之垃圾回收算法实现细节

    @ 目录 前言 垃圾回收算法实现细节 根节点枚举 安全点 安全区域 记忆集和卡表 写屏障 并发的可达性分析 低延迟GC Shenandoah ZGC 总结 前言 本篇紧接上文,主要讲解垃圾回收算法的实 ...

  5. 使用 MySQLi 和 PDO 向 MySQL 插入数据

    PHP MySQL 插入数据 使用 MySQLi 和 PDO 向 MySQL 插入数据 在创建完数据库和表后,我们可以向表中添加数据. 以下为一些语法规则: PHP 中 SQL 查询语句必须使用引号 ...

  6. 什么是 PHP SimpleXML？

    PHP SimpleXML PHP SimpleXML 处理最普通的 XML 任务,其余的任务则交由其它扩展处理. 什么是 PHP SimpleXML? SimpleXML 是 PHP 5 中的新特性 ...

  7. PHP date_default_timezone_set() 函数

    ------------恢复内容开始------------ 实例 设置默认时区: <?php date_default_timezone_set("Asia/Shanghai&quo ...

  8. 毒瘤dp 学校食堂

    这道dp题 可谓是比较难了,我想了2h 总是觉得自己设的状态没有包涵全部的状态空间 一直想不出来状态 最后败北. 正解是这样的 我们肯定是有一维i的表示 到了i 这个人吃饭了 但是在i吃饭之前后面的7 ...

  9. intel：spectre&Meltdown侧信道攻击（三）—— raw hammer

    今天介绍raw hammer攻击的原理:这次有点“标题党”了.事实上,raw hammer是基于DRAM内存的攻击:所以理论上,只要是用了DRAM内存的设备,不论是什么cpu(intel.amd,或则 ...

  10. jsp应用-实现用户登陆功能

    项目结构 1.login.jsp 这个没什么好说的,把表单提交到校验页面进行校验 2.首先获取request域中user,password,然后进行校验,校验成功把信息存入session域,然后转发到 ...