uniappMap组件的简单使用

1.官网地址

​ 官网讲得很详细，里面有各种属性说明，属性配置；

​ 别的不多说了，直接上代码

2.特别属性

		
		scale：5，//最小数，缩放范围最大，可见程度最大
		
		scale：18，//最大数，缩放范围最小，可见程度最小
		

3.这个是官网的代码，copy下来直接可以用

效果：

<template>
    <view>
        <view class="page-body">
            <view class="page-section page-section-gap">
                <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
                </map>
            </view>
        </view>
    </view>
</template>


export default {
    data() {
        return {
      id:0, // 使用 marker点击事件 需要填写id
            title: 'map',
            latitude: 39.909,
            longitude: 116.39742,
            covers: [{
                latitude: 39.909,
                longitude: 116.39742,
                iconPath: '../../../static/location.png'
            }, {
                latitude: 39.90,
                longitude: 116.39,
                iconPath: '../../../static/location.png'
            }]
        }
    },
    methods: {

    }
}

4.下面是自己调试后的效果

效果：

<template>
    <view>
        <view class="page-body">
            <view class="page-section page-section-gap">
                <map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers" :polyline="polyline" @tap='tap' scale="7">
                </map>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
	    data() {
	        return {
				id:3, // 使用 marker点击事件 需要填写id
	            title: 'map',
	            latitude:36.646385,					//效果图地图中心点纬度 
	            longitude:117.125244,				//效果图地图中心点经度 
	            covers: [
				//北京
				{
					longitude: 116.40,
					latitude: 39.90,	
					// iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `北京市`
				
					}
				}, 
				//济南
				{
					longitude: 117.117004,
					latitude: 36.650793,	
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `济南市`
				
					}
				}, 
				//青岛
				{
					longitude: 120.382690,
					latitude: 36.069082,	
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `青岛市`
				
					}
				}, 
				//淄博
				{
					longitude: 118.053589,
					latitude: 36.818080,	
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `淄博市`
				
					}
				}, 
				//枣庄
				{
					longitude: 117.322998,
					latitude: 34.811548,	
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `枣庄市`
				
					}
				}, 
				//东营
				{
					longitude: 118.677063,
					latitude: 37.431251,	
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `东营市`
				
					}
				}, 
				//临沂
				{
					longitude: 118.350220,
					latitude: 35.110922,	
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `临沂市`
				
					}
				}, 
				//菏泽
				{
					longitude: 115.482788,
					latitude: 35.232159,	
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `菏泽市`
				
					}
				}, 
				//泰安
				{
					longitude: 117.092285,
					latitude: 36.202174,	
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `泰安市`
				
					}
				}, 
				//日照
				{
					longitude: 119.525757,
					latitude: 35.420392,		
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `日照市`
				
					}
				}, 
				//滨州
				{
					longitude: 117.971249,
					latitude: 37.383230,
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `滨州市`
				
					}
				}, 
				//威海
				{
					longitude: 122.121334,
					latitude: 37.520596,	
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `威海市`
				
					}
				}, 
				//烟台
				{
					longitude: 121.448422,
					latitude: 37.466116,		
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `烟台市`
				
					}
				}, 
				//聊城
				{
					longitude: 115.985470,
					latitude: 36.456613,	
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `聊城市`
				
					}
				}, 
				//潍坊
				{
					longitude: 119.157772,
					latitude: 36.705839,	
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `潍坊市`
				
					}
				}, 
				//济宁
				{
					longitude: 116.586971,
					latitude: 35.418130,
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `济宁市`
				
					}
				}, 
				//德州
				{
					longitude: 116.359005,
					latitude: 37.435590,
					iconPath: '../../static/biaodian.png',
					width: 30,
					height: 30,
					callout: {
						borderRadius: 10,
						padding: 10,
						bgColor: '#CDDFF3',
						color: '#f00',
						fontSize: 10,
						content: `德州市`
				
					}
				}, 
				],
				polyline: [
					//济南北京连线
					{
						points: [
							{longitude: 117.117004,latitude: 36.650793}, 				//济南经纬度
							{longitude: 116.402893,latitude: 39.903416}					//北京经纬度
						],
						color: '#000000',
						width: 1,
						dottedLine:"true",
					},
					//山东省连线图
					{
						points: [
							{longitude: 122.709045,latitude: 37.396346},
							{longitude:	122.68157958984375,latitude: 37.41925395973696},
							{longitude: 122.5469970703125,latitude: 37.39634613318923},
							{longitude: 122.486572265625,latitude: 37.4307052461285},
							{longitude: 122.38700866699219,latitude: 37.41707256376112},
							{longitude: 122.31010437011719,latitude: 37.42034463389752},
							{longitude: 122.19749450683594,latitude: 37.4519672738549},
							{longitude: 122.299805,latitude: 37.453057},
							{longitude: 122.135010,latitude: 37.544577},
							{longitude: 121.654358,latitude: 37.490115}	
						],
						color: '#f00',
						width: 5,
					}
				],
				
	        }
			
	    },
	    methods: {
			tap(e) {
				console.log(e.detail)
			},
	    }
	}
</script>

<style>

</style>