uniapp加载leaflet地图
详细介绍了在uni-app中如何通过renderjs加载leaflet地图,并在地图上进行交互
·
uni-app加载leaflet地图,需要借助于renderjs,直接上代码,供大家参考指正
<view class="leaflet-map-page">
<view :prop="dataObj" :change:prop="leaflet.drawMarker" id="map" class="map"> </view>
</view>
<script>
export default {
components: {
},
data() {
return {
dataObj : {},
dataList : [],
}
},
mounted() {
this.dataObj = {
dataList : [],
}
},
methods: {
}
}
</script>
<script module="leaflet" lang="renderjs">
const L = require('@/static/leaflet/leaflet-1.3.4.min.js');
import '@/static/leaflet/leaflet-1.3.4.css';
let map = null;
let layerGroup = null;
export default {
mounted() {
this.init();
},
methods:{
init(){
map = L.map('map',{
zoomControl : false
}).setView([32.7302595,111.4355275],10);
L.tileLayer("http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=0064dec30e2d06d872cf71b4cbb9bbce")
.addTo(map);
L.control.zoom({
position:'bottomright',
}).addTo(map);
},
drawMarker(newValue, oldValue, ownerInstance, instance){
let {dataList} = newValue;
// 此处写想要实现的效果的方式
},
clearMarker(){
if (layerGroup !== null) {
layerGroup.clearLayers();
layerGroup = null;
}
}
}
}
</script>
效果图
更多推荐
已为社区贡献5条内容
所有评论(0)