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. WEB简单的登录注册功能（分层）

    登录: 前端页面: <body> <form action="/webtext/LogingServlet" method="post"> ...

  2. phpcms根据二级栏目列表写的三级栏目列表

    <div class="container"> <!--左边树状导航--> <div class="CNLTreeMenu" id ...

  3. dp最长不下降序列

    // // Created by snnnow on 2020/4/13. // //这是dp 问题的基础题 // //最长不下降 //(导弹拦截是其例题) //那这篇文章是讲啥呢, // 主要是吧, ...

  4. 巩固复习(Hany驿站原创)_python的礼物

    Python编程语言简介 https://www.cnblogs.com/hany-postq473111315/p/12256134.html Python环境搭建及中文编码 https://www ...

  5. PHP strval() 函数

    strval() 函数用于获取变量的字符串值.高佣联盟 www.cgewang.com PHP 版本要求: PHP 4, PHP 5, PHP 7 语法 string strval ( mixed $ ...

  6. JWT到底是个什么鬼？

    前面一篇我们了解了微服务安全认证架构是如何演进而来的,但是发现v2.5架构仍然较重,有没有轻量级一点的方法呢?其实业界早已有了实践,它就是基于JWT的安全认证架构.JWT到底是个什么鬼呢?本篇为你解答 ...

  7. 实践录丨如何在鲲鹏服务器OpenEuler操作系统中快速部署OpenGauss数据库

    本文适合需要快速了解OpenGauss基本使用和操作的单机用户,可以短时间内完成安装体验.对于企业级生产使用或者需要部署多台服务器的,不适合本文. 因为业务需要,要在鲲鹏架构里安装单机版的OpenGa ...

  8. 笨办法学python3练习代码ex19.py

    定义函数的语法: def  函数名(参数) (语句) #函数和变量 #函数里的变量与脚本里的变量是没有联系的. def cheese_and_crackers(cheese_count,boxes_o ...

  9. TF签名为什么这么稳定?TF签名找微导流!

      TF签名作为目前最稳定的签名方式收到了业界开发者们的认可,而在如今鱼龙混杂的签名平台中,应该如何选择客厅的TF签名平台呢?下面就一起来看看TF签名为什么这么稳定?TF签名找微导流!   TF签名的 ...

  10. CSS部分样式知识

    css文件 /* 注释内容 */ /* 选择器,其中body就是一个选择器,表示选中个body这个标签 声明块:为选择器设置样式 { 样式名: 样式值; } */ body{ background-c ...