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)度开始计算瓦片, ...
随机推荐
- Java Web(2)-jQuery上
一.jQuery初体验 使用jQuery给一个按钮绑定单击事件 <!DOCTYPE html> <html lang="en"> <head> ...
- c++ string类find总结
c++ string类的find:1.find string s = "My cat's breath smells like cat food."; int a=s.find(& ...
- 【保姆级教学】新手第一次搭建vue项目和初始化
前端项目初始化步骤 安装vue脚手架 通过vue脚手架创建项目 配置vue路由 配置Element-UI组件库 配置axios库 初始化git远程仓库 将本地项目托管到github或者码云上 通过vu ...
- PHP 是什么？简介下
PHP 是服务器端脚本语言. 您应当具备的基础知识 在继续学习之前,您需要对以下知识有基本的了解: HTML CSS PHP 是什么? PHP(全称:PHP:Hypertext Preprocesso ...
- PHP - AJAX 与 MySQL-AJAX 数据库实例
PHP - AJAX 与 MySQL AJAX 可用来与数据库进行交互式通信. AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息: 本教程使用到的 Websites 表 ...
- Python os.chmod() 方法
概述 os.chmod() 方法用于更改文件或目录的权限.高佣联盟 www.cgewang.com 语法 chmod()方法语法格式如下: os.chmod(path, mode) 参数 path - ...
- Echarts饼图绘制
实现效果: html代码: <div id="chartBody1" style="width:120%;height:28vh;"> <di ...
- Java Udp Socket Simple Demo
import java.io.IOException; import java.net.DatagramPacket; import java.net.DatagramSocket; import j ...
- CF R639 div 2 E Quantifier Question 数学 dfs 图论
LINK:Quantifier Question 题面过长 引起不适 读题花了好长时间 对于 和 存在符合不是很熟练 导致很懵逼的做完了. 好在还算很好想.不过wa到了一个坑点上面 自闭一大晌 还以为 ...
- Guava基本工具--常见Object方法
在Java中Object类是所有类的父类,其中有几个需要override的方法比如equals,hashCode和toString等方法.每次写这几个方法都要做很多重复性的判断, 很多类库提供了覆写这 ...