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)度开始计算瓦片, ...
随机推荐
- 解决用vscode开发arduino时Serial未定义
在工作目录编辑c_cpp_properties.json文件 添加defines字段 { "configurations": [ { "name": " ...
- SpringBoot多数据库连接（mysql+oracle)
出于业务需求,有时我们需要在spring boot web应用程序中配置多个数据源并连接到多个数据库. 使用过Spring Boot框架的小伙伴们,想必都发现了Spring Boot对JPA提供了非常 ...
- mysql字符集 utf8 和utf8mb4 的区别
一.导读我们新建mysql数据库的时候,需要指定数据库的字符集,一般我们都是选择utf8这个字符集,但是还会又一个utf8mb4这个字符集,好像和utf8有联系,今天就来解析一下这两者的区别. 二.起 ...
- transaction already active
这个问题是使用spring 事务管理时经常出现的错误,最开始时相当令我头疼,也不知道是哪里出现的问题.在网上找了一阵后,依然无解.意思就是说上一个事务处于激活状态中,不能开始新的数据库更新操作. // ...
- PHP jdmonthname() 函数
------------恢复内容开始------------ 实例 返回 1998 年 1 月 13 日这天的格利高里历法的月份简写字符串: <?php$jd=gregoriantojd(1,1 ...
- 小甲鱼零基础汇编语言学习笔记第五章之[BX]和loop指令
这一章主要介绍什么是[BX]以及loop(循环)指令怎么使用,loop和[BX]又怎么样相结合,段前缀又是什么鬼,以及如何使用段前缀. 1.[BX]的概念 [BX]和[0]类似 ...
- C/C++编程笔记：C语言成绩管理系统！链式结构的管理系统源码分享
最近很多同学因为学校的要求,需要完成自己的那个C语言课程设计,于是就有很多人私信或者加我私聊我,问的最多的还是<学生成绩管理系统>,其实当你项目写多了你就会发现:其实各类的管理系统都离不开 ...
- Dynmaics 365 scale group
关于scale Groups的概念,在看Dynamics crm online的时候,一直不理解缩放组scale group的概念,后来查到GP也在用这个概念,想想不就是动态扩展嘛,马上顿悟了,原来如 ...
- SparkSQL & Spark on Hive & Hive on Spark
刚开始接触Spark被Hive在Spark中的作用搞得云里雾里,这里简要介绍下,备忘. 参考:https://blog.csdn.net/zuochang_liu/article/details/82 ...
- 回首Java——写在前面
我记得在大学的课程要求中,第一个接触的高级编程语言,应该是C语言或者C++等.但是Java应该是我的编程母语,我在高中毕业就接触了Java语言.当时看的是纸质书,具体书名也忘记了.只记得当时第一次接触 ...