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>