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>
转载于:https://www.cnblogs.com/zqyw/p/11132662.html
相关资源：Vue2Leaflet一个Leaflet地图的Vue2组件