forked from xxhjsb/hbt-prevention-ui
64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<template>
|
|
<div class="map" :id="id"></div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Emit, Prop, PropSync, Vue } from 'vue-property-decorator';
|
|
import mapboxgl from "mapbox-gl";
|
|
import "mapbox-gl/dist/mapbox-gl.css"
|
|
@Component
|
|
export default class MapComponent extends Vue {
|
|
public map: any
|
|
|
|
@Prop({
|
|
required: false,
|
|
default: "map"
|
|
})
|
|
id: string;
|
|
|
|
@PropSync("position", {
|
|
required: false,
|
|
default: () => {
|
|
return [119.592977, 34.523847]
|
|
}
|
|
})
|
|
center: number[]
|
|
@Prop({
|
|
required: false,
|
|
default: 12
|
|
})
|
|
zoom: number;
|
|
|
|
@Emit("onLoad")
|
|
onLoad(map) {
|
|
|
|
}
|
|
|
|
public initMap() {
|
|
mapboxgl.accessToken = "sk.eyJ1IjoiaGJ0a2owMjUiLCJhIjoiY2xtc201MHFjMDF5dzJrcWx5c3NiYzR4YiJ9.JEAHC6qFH5EDFTzJDb7Mzg";
|
|
this.map = new mapboxgl.Map({
|
|
// accessToken :"pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA",
|
|
container: this.id,
|
|
style: 'mapbox://styles/mapbox/streets-v9',
|
|
center: this.center,
|
|
zoom: 16,
|
|
});
|
|
this.map.on("load", () => {
|
|
this.map.resize()
|
|
this.onLoad(this.map)
|
|
})
|
|
}
|
|
mounted() {
|
|
this.initMap()
|
|
}
|
|
beforeDestroy() {
|
|
// this.map.remove();
|
|
// this.map = null;
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style> |