vue+leaflet

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的更多相关文章

基于vue+leaflet+echart的足迹分享评论平台
(其实题目是随便取的,目的只是用来证明Vue+leaflet+springboot技术栈的可行性) 效果小专栏不支持上传视频?想看的话可以去我的知乎看最新的文章,那个应该可以.在这里主要功能描述 ...
记vue+leaflet的一次canvas渲染爆栈
背景: 在地图上绘制大量的circleMarker,leaflet能选择使用canvas来渲染,比起默认的svg渲染来说在大量绘制的情况下会更加流畅.但当触发其中某一个circleMarker的too ...
如何在VUE中使用leaflet地图框架
前言:在leaflet的官方文档只有静态的HTML演示并没有结合VUE的demo 虽然也有一些封装好的leaflet库例如Vue-Leaflet,但是总感觉用起来不是那么顺手,有些业务操作还是得用l ...
vue 实现 leaflet的测绘，测距，测面
参考1:https://blog.csdn.net/lonly_maple/article/details/83658608 参考2:https://blog.csdn.net/xtfge0915/a ...
【GIS】Vue、Leaflet、highlightmarker、bouncemarker
感谢: https://github.com/brandonxiang/leaflet.marker.highlight https://github.com/maximeh/leaflet.boun ...
Vue.js使用Leaflet地图
参考:https://blog.csdn.net/Joshua_HIT/article/details/72860171 vue2leaflet的demo:https://github.com/KoR ...
VUE2 项目引入 leaflet.draw全过程
leaflet.draw的参考文档:http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html 这个网址不稳定,多刷新几 ...
Angular + Leaflet 实现房源数据可视化(附github源码)
这是什么?租房信息展示平台宏观的租房数据可视化微观的房源信息展示多条件搜索等等链接地图搜租房来龙去脉受 @李国宝的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息系统方面的 ...
Leaflet 调用百度瓦片地图服务
在使用 leaflet 调用第三方瓦片地图服务的项目,主要谷歌地图.高德地图.百度地图和 OSM 地图,与其他三种地图对比,百度地图的瓦片组织方式是不同的.百度从中心点经纬度(0,0)度开始计算瓦片, ...

随机推荐

vue 修改路由
直接放代码: this.$router.push({ path: "/login" });
NACOS安装和配置
安装包nacos-server-1.1.4.tar.gz 环境 JDK1.8 上传及解压 [root@centos7- ~ ]# mkdir -p /cslc/nacos #通过SFTP将安装包上传至 ...
heredoc
Heredoc在正规的PHP文档中和技术书籍中一般没有详细讲述.他是一种Perl风格的字符串输出技术.使用heredoc技术可以实现界面与代码的准分离,比如phpwind模板.规则如下:1.”< ...
PHP date_date_set() 函数
------------恢复内容开始------------ 实例返回一个新的 DateTime 对象,设置一个新的日期,然后格式化日期: <?php$date=date_create();d ...
C/C++编程笔记：C语言实现连连看游戏，小白练手项目（源码分享）
本篇文章分享看题目就知道是写给初学者的,学的比较好的小伙伴也可以将自动算法等一些知识给加进去,希望对大家有帮助! 好了,当我们所有的准备工作做好之后,我们就可以来编写我们的C语言连连看游戏了! 其实这 ...
4.13 省选模拟赛树树形dp 卷积 NTT优化dp.
考试的时候看到概率看到期望我就怂推了一波矩阵树推自闭了发现边权点权的什么也不是. 想到了树形dp 维护所有边的断开情况然后发现数联通块的和再k次方过于困难. 这个时候应该仔细观察一下和 ...
navicat for mysql 连接报错1251的解决方法
这是因为比较新的mysql版本采用新的保密方式,若要用navicat连接需要改使用到的用户的密码方式:use mysql:ALTER USER 'root'@'localhost' IDENTIFIE ...
《分享》Koa2源码分析
曾经在公司内部做的一起关于koa源码的分享,希望对你有帮助: koa2 源码分析整理 koa2(2.4.1版本)源码主要包含四个js,包括application.js, context.js, req ...
CF1349F 【Slime and Sequences】part1
由于本文过长,$\LaTeX$ 炸了,分两篇,part2 题目描述定义一个正整数序列为好序列,当且仅当如果某个数 $k$ 出现过,那么一定有 $k-1$ 在最后一个 $k$ 的前面出 ...
社区观点 | 理解比原链MOV链上交换协议
去中心化交换协议的发展从Bitshare,Stellar到以太坊上的Etherdelta,Bancor,0x协议,去中心化交换协议也经过了好几代发展和很多模式的探索,每一代都通过前面的协议的痛点来进 ...

vue+leaflet

vue+leaflet的更多相关文章

随机推荐

热门专题