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)度开始计算瓦片, ...
随机推荐
- Statezhong shiyong redux props
在构造方法中使用props给state赋值不允许, 原因需要检查
- TCP通信---文件上传案例、多线程文件上传
目前大多数服务器都会提供文件上传的功能,由于文件上传需要数据的安全性和完整性,很明显需要使用TCP协议来实现. TCP通信需要创建一个服务器端程序和一个客户端程序,实现客户端向服务器端上传文件 代码实 ...
- Django开发之Ajax 返回内容报错
预期效果 Django通过Ajax POST提交数据,前台弹窗处理结果 粗略代码 # views.py 代码 ...省略... msg = { 'code': 200, 'message': 'Hel ...
- 重置spyder 解决 gbk 编码不能读取问题
重置spyder 解决 gbk 编码不能读取问题 2020-06-18
- 线程_multiprocessing实现文件夹copy器
import multiprocessing import os import time import random def copy_file(queue,file_name,source_fold ...
- PHP pos() 函数
实例 输出数组中的当前元素的值: <?php$people = array("Peter", "Joe", "Glenn", &quo ...
- PHP date_timestamp_get() 函数
实例 返回今天的日期和时间的 Unix 时间戳: <?php$date=date_create();echo date_timestamp_get($date);?> 运行实例 » 定义和 ...
- PHP imageantialias - 是否使用抗锯齿（antialias）功能
imageantialias — 是否使用抗锯齿(antialias)功能.高佣联盟 www.cgewang.com 语法 bool imageantialias ( resource $image ...
- XSSFWorkbook
支持2007以后的 此类与HSSFWorkbook(支持2007之前) 类似,读取文件时把全部的内容都存放到内存中,关闭输入流后. 内存与硬盘完全是毫无关系的两份数据,所有的操作都是对内存的操作,最后 ...
- 国浩：Cassandra在360的最新进展
大家好,我是来自奇虎360的国浩.今天我给大家带来的是Cassandra在360的最新进展. 我会从四个方面来介绍Cassandra在360的应用情况:Cassandra在360的使用历史再结合两个案 ...