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)度开始计算瓦片, ...
随机推荐
- Git Push提示没有权限
中途协助别人开发的一个小项目, 我已经是该项目的Developer, 可是提交代码依然提示无权限 这是由于我是在master上直接提交的, 而GitLab默认是保护master分支的, push只对M ...
- 解决用vscode开发arduino时Serial未定义
在工作目录编辑c_cpp_properties.json文件 添加defines字段 { "configurations": [ { "name": " ...
- Java应用服务器之tomcat session server msm搭建配置
在上一篇博客中,我们介绍了tomcat自带的cluster组件配置session replication cluster,回顾请参考https://www.cnblogs.com/qiuhom-187 ...
- JVM系列之:对象的锁状态和同步
目录 简介 java对象头 java中锁状态的变化 偏向锁biased locking 轻量级锁thin lock 重量级锁 三种锁状态的不同 简介 锁和同步是java多线程编程中非常常见的使用场景. ...
- Python package project
使用 Python 书写项目打包程序(已经存在 shell 的脚本,经过对比 Python 脚本的执行过程更加的可控人性化实现的功能相同) #!/usr/bin/env python # _*_cod ...
- Dom运用1
1.简单计算器 <!-- 第一个数--> <input type="text"> <!-- 符号复选框--> <select name=& ...
- 【Gin-API系列】需求设计和功能规划（一）
场景需求 数据库存储2个模型,每个模型都有一个或多个IP字段,需要通过 Golang Http Api(Restful Api) 返回 IP 信息. 模型1 - 服务器 ID 主机名 IP 内存大小 ...
- REST是什么？RESTFul又是什么？这二者的关系是怎样的？
REST(一种软件架构风格) 全称:Representational State Transfer 含义:(表述性 状态 转移) 是一种针对网络应用的设计和开发方式,可以降低开发的复杂性,提高系统的可 ...
- jmeter变量的声明和使用
@@@@@@@@@@@@@@@ 据说好多人早上看时间不是为了起床,而是看还能睡多久 jmeter中变量的使用还是很广泛的,有语言基础的都知道变量是什么意思.在jmeter中变量的声明和调用也都有自己的 ...
- PHP sizeof() 函数
实例 返回数组中元素的数目: <?php$cars=array("Volvo","BMW","Toyota");echo sizeof ...