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. Django学习路22_empty为空,forloop.counter 从1计数,.counter0 从0计数 .revcounter最后末尾数字是1,.revcounter0 倒序,末尾为 0

    当查找的数据不存在,返回为 空时 在 html 中使用 {%empty%} 语句 进行显示 def getstudents(request): students = Student.objects.a ...

  2. 运行过程中给类添加方法 types.MethodType

    class Person(object): def __init__(self,name = None,age = None): self.name = name#类中拥有的属性 self.age = ...

  3. HTML中div嵌套div的margin不起作用

    下面介绍一下div嵌套div时margin不起作用的解决方案. 顺便科普下margin的定义和用法. div嵌套的HTML代码: <!DOCTYPE html> <html lang ...

  4. 设在起始地址为STRING的存储空间存放了一个字符串（该串已存放在内存中，无需输入，且串长不超过99），统计字符串中字符“A”的个数，并将结果显示在屏幕上。

    问题 设在起始地址为STRING的存储空间存放了一个字符串(该串已存放在内存中,无需输入,且串长不超过99),统计字符串中字符"A"的个数,并将结果显示在屏幕上. 代码 data ...

  5. PHP atan() 函数

    实例 通过 atan() 函数返回不同数的反正切: <?phpecho(atan(0.50) . "<br>");echo(atan(-0.50) . " ...

  6. bzoj 2225 [Spoj 2371]Another Longest Increasing

    这道题 连续上升的三元组 且已经按照第一维排好序了. 直接上CDQ分治即可 当然也是可以2-Dtree解决这个 问题 但是感觉nlog^2 比nsqrt(n)要快一些.. 算是复习一发CDQ分治吧 也 ...

  7. rabbitMQ安装问题记录

    参考链接: rabbitmq国内镜像地址:https://www.newbe.pro/Mirrors/Mirrors-RabbitMQ/ https://www.zhihu.com/question/ ...

  8. Linux的VMWare中Centos7文件系统挂载和开启网卡及简单命令

    一.路径 挂载磁盘/etc/fastab  开启网卡 vi .bash_profile              ---更改PATH环境变量 可设置 mysql提示符 cd  /etc/yum.rep ...

  9. OKHttp 官方文档【二】

    OkHttp 是这几年比较流行的 Http 客户端实现方案,其支持HTTP/2.支持同一Host 连接池复用.支持Http缓存.支持自动重定向 等等,有太多的优点. 一直想找时间了解一下 OkHttp ...

  10. JavaSwing+Mysql实现简单的登录界面+用户是否存在验证

    原生Java+mysql登录验证 client login.java 功能:实现登录页面,与服务端传来的数据验证 package LoginRegister; import java.awt.Cont ...