vue2-maptalks 是 vue 和 maptalks 的实现
# npm
npm i vue2-maptalks maptalks -S
# yarn
yarn add vue2-maptalks maptalks
// main.js
import Vue from 'vue';
import {Vue2Maptalks} from 'vue2-maptalks';
import 'maptalks/dist/maptalks.css';
Vue.use(Vue2Maptalks);
<div>
<div class="map">
<mt-map :options="mapOptions">
<mt-tile-layer
id="tile"
url-template="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
:subdomains="['a','b','c','d']"
></mt-tile-layer>
<mt-scale></mt-scale>
<mt-zoom></mt-zoom>
<mt-vector-layer id="vector">
<mt-marker :coordinates="[-0.113049, 51.498568]">
<mt-info-window title="infoWindow">
<div>info body</div>
</mt-info-window>
</mt-marker>
</mt-vector-layer>
</mt-map>
</div>
</div>
<script>
export default {
data() {
return {
mapOptions: {
zoom: 13,
center: [-0.113049, 51.498568],
},
}
}
}
</script>
git clone https://github.com/sxyhappy/vue2-maptalks.git
cd vue2-maptalks
# install dependencies
npm install
# or
yarn
# run dev
npm run dev