<template>
	<div id="map" style="margin: 20px auto; width:100%;height:500px;"></div>
	<!-- width可以为100%，但是height必须是一个确定的值 -->
</template>

<script>
	export default {
		name: "hello",
		components: {

		},
		data() {
			return {
				map: null,
				stations: [{
					"markpoint": "A加油站xxxx路xx号",
					"latitude": 32.04482,
					"longitude": 112.13546
				}, {
					"markpoint": "B加油站xxxx路x2222号",
					"latitude": 32.359068,
					"longitude": 111.683861
				}, {
					"markpoint": "加油站11路2号",
					"latitude": 32.38887,
					"longitude": 111.903148
				}, {
					"markpoint": "加油站21路3号",
					"latitude": 31.367942,
					"longitude": 110.349102
				}, {
					"markpoint": "加油站31路4号",
					"latitude": 33.736532,
					"longitude": 113.916354
				}, {
					"markpoint": "加油站41路5号",
					"latitude": 33.226085,
					"longitude": 113.533704
				}, {
					"markpoint": "加油站51路6号",
					"latitude": 32.130095,
					"longitude": 111.31492
				}, {
					"markpoint": "加油站61路7号",
					"latitude": 30.27176,
					"longitude": 111.558339
				}, {
					"markpoint": "加油站71路8号",
					"latitude": 31.63134,
					"longitude": 113.645388
				}, {
					"markpoint": "加油站81路9号",
					"latitude": 30.294268,
					"longitude": 113.684845
				}]
			}
		},
		created() {

		},
		destroyed() {
			this.map = null;
		},

		mounted() {
			this.initMap();

		},
		methods: {
			initMap() {
				var resultLayer;
				var url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326';
				this.map = L.map('map', {
					preferCanvas: true,
					crs: L.CRS.EPSG4326,
					center: [34, 108],
					maxZoom: 18,
					zoom: 3,
					attributionControl: false // 移除右下角leaflet标识
				});
				L.supermap.tiledMapLayer(url).addTo(this.map);
				var markers = [];
				console.log("加油站数量" + this.stations.length);
				this.stations.forEach(element => {
					var lat = element.latitude;
					var lon = element.longitude;
					var markpoint = element.markpoint;
					var marker = L.marker([lat, lon]);
					marker.bindPopup(markpoint);
					markers.push(marker);
				})
				resultLayer = L.featureGroup(markers).addTo(this.map);
			},
		},
	}
</script>

<style scoped>

</style>

效果图：

注意事项：

1、map容器的宽可以设置为100%，但是高一定要给个确定的数值，否则地图出不来。

2、案例中的底图是中国地图，从supermap服务器获取底图，可能出现连接不上的情况。（大家可能会误以为是安装或者引入错误导致的，其实仅仅是底图出不来而已，其他功能都能使用）。

3、 最好再destroyed() 里把全局map置空，以免出现诸如map容器已经被初始化之类的错误。

 官网有很多案例，可以参考来写。

iClient for Leaflet 开发指南