uniapp加载leaflet地图

最新推荐文章于 2024-06-15 20:00:32 发布

勤劳@小蚂蚁

最新推荐文章于 2024-06-15 20:00:32 发布

阅读量1.7k

点赞数 1

分类专栏： uni-app

本文链接：https://blog.csdn.net/zcylyzhi4/article/details/125387597

版权

uni-app Leaflet 地图 renderjs 前端开发

关键词由CSDN通过智能技术生成

uni-app 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>