uniapp加载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>

效果图
uniapp加载leaflet地图_第1张图片

你可能感兴趣的:(uni-app,vue.js,前端,javascript)