1、属性
详细属性可通过以下官方文档进行了解，这里只对一些常用的做简单介绍
uni-app官方文档
scale：缩放级别，也就是放大缩小的程度，取值范围在3-20之间，默认值为16。
markers：标记点，用于在地图上显示标记的位置。
controls：控件，在地图上显示的控件，不会随地图移动。
polyline：路线，指定一系列坐标点，从数组第一项连线至最后一项。
circles：在地图上显示圆。
show-location：显示带有方向的当前定位点。
2、先从一个简单的开始
根据经纬度显示出来一个地图
<map class="map" style="width: 100%;height: 80vh;" :latitude="latitude" :longitude="longitude"></map>
js部分
<script>
export default {
data() {
return {
latitude: 40.012202, //纬度
longitude: 119.682421 //经度
}
}
}
</script>
图片.png
这里显示的是默认的缩放比16，然后我们设置它的缩放比为11看一下对比。
<template>
<view class="home">
<map class="map" style="width: 100%;height: 80vh;" :latitude="latitude" :longitude="longitude"
:scale="scale"></map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 40.012202, //纬度
longitude: 119.682421, //经度
scale: 11
}
}
}
</script>
图片.png
3、添加markers、polyline、circles、controls等
3.1、标记点markers
<template>
<view class="home">
<map class="map" style="width: 100%;height: 80vh;" :latitude="latitude" :longitude="longitude" :scale="scale"
:markers="marker"></map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 40.013305,
longitude: 118.685713,
scale: 11,
marker: [{
id: 0,
latitude: 40.013305, //纬度
longitude: 118.685713, //经度
iconPath: '../../static/tabbar/tab-box-selected.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
title: '你在哪了', //标注点名
alpha: 0.5, //透明度
label: { //为标记点旁边增加标签 //因背景颜色H5不支持
content: '唐山迁安', //文本
color: 'red', //文本颜色
fontSize: 12, //文字大小
x: 50, //label的坐标，原点是 marker 对应的经纬度
y: 20, //label的坐标，原点是 marker 对应的经纬度
borderWidth: 0, //边框宽度
borderColor: 'pink', //边框颜色
borderRadius: 20, //边框圆角
bgColor: 'black', //背景色
padding: 5, //文本边缘留白
textAlign: 'right' //文本对齐方式。
},
// callout: { //自定义标记点上方的气泡窗口 点击有效
// content: '幸福花园店A组', //文本
// color: '#000000', //文字颜色
// fontSize: 14, //文本大小
// borderRadius: 2, //边框圆角
// bgColor: '#00c16f', //背景颜色
// display: 'ALWAYS', //常显
// },
// anchor:{//经纬度在标注图标的锚点，默认底边中点
// x:0, 原点为给出的经纬度
// y:0,
// }
}],
}
}
}
</script>
图片.png
自定义标记点
标记点的图标是一定要设置的，不然显示不出来标记点
<template>
<view class="home">
<map class="map" style="width: 100%;height: 80vh;" :latitude="latitude" :longitude="longitude" :scale="scale"
:markers="marker">
<cover-view slot="callout">
<cover-view v-for="(item, index) in marker" :marker-id="item.id" class="customCallout"
:style="{backgroundColor: item.callout.bgColor, borderWidth: item.callout.borderWidth + 'px', borderColor: item.callout.borderColor, borderRadius: item.callout.borderRadius + 'px'}">
<!-- <cover-image class="icon" :src="require('@/intelligencepages/public/img/icon-1.png')"></cover-image> -->
<cover-view class="content"
:style="{fontSize: item.callout.fontSize + 'px', color: item.callout.color}">
{{item.callout.content}}
</cover-view>
</cover-view>
</cover-view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 40.013305,
longitude: 118.685713,
scale: 11,
marker: [{
id: 0,
latitude: 40.013305, //纬度
longitude: 118.685713, //经度
iconPath: '../../static/tabbar/tab-box-selected.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
title: '你在哪了', //标注点名
alpha: 0.5, //透明度
// label: { //为标记点旁边增加标签 //因背景颜色H5不支持
// content: '唐山迁安', //文本
// color: 'red', //文本颜色
// fontSize: 12, //文字大小
// x: 50, //label的坐标，原点是 marker 对应的经纬度
// y: 20, //label的坐标，原点是 marker 对应的经纬度
// borderWidth: 0, //边框宽度
// borderColor: 'pink', //边框颜色
// borderRadius: 20, //边框圆角
// bgColor: 'black', //背景色
// padding: 5, //文本边缘留白
// textAlign: 'right' //文本对齐方式。
// },
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '幸福花园店A组', //文本
color: '#000000', //文字颜色
fontSize: 14, //文本大小
borderRadius: 2, //边框圆角
bgColor: '#00c16f', //背景颜色
display: 'ALWAYS', //常显
},
anchor: { //经纬度在标注图标的锚点，默认底边中点
x: 0,
// 原点为给出的经纬度
y: 0,
}
}],
}
}
}
</script>
<style lang="scss">
.home {
.customCallout {
box-sizing: border-box;
display: inline-flex;
padding: 10rpx 20rpx;
justify-content: center;
align-items: center;
border-style: solid;
text-align: center;
.icon {
width: 30rpx;
height: 30rpx;
display: inline-block;
}
.content {
flex: 0 1 auto;
margin: 0 10rpx;
}
}
}
</style>
图片.png
3.2、controls、circles、polyline
由于相同的代码比较多，这里就懒的写了，将下面的代码添加到data里面，然后对map进行赋值就行了。
controls: [{ //在地图上显示控件，控件不随着地图移动
id: 1, //控件id
iconPath: '../../static/images/myself.jpg', //显示的图标
position: { //控件在地图的位置
left: 15,
top: 15,
width: 50,
height: 50
},
}],
circles: [{ //在地图上显示圆
latitude: 40.013,
longitude: 118.685,
fillColor: "#999999", //填充颜色
color: "#0016ca", //描边的颜色
radius: 20, //半径
strokeWidth: 2 //描边的宽度
}],
polyline: [{ //指定一系列坐标点，从数组第一项连线至最后一项
points: [{
latitude: 40.013305,
longitude: 118.685713
},
{
latitude: 40.013,
longitude: 118.685
},
],
color: "#0000AA", //线的颜色
width: 2, //线的宽度
dottedLine: true, //是否虚线
arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
}],
图片.png
4、复杂点的demo
<map id="map" class="map_view" :style="{width: '100vw', height: mapHeigth}" theme="satellite" :skew="60"
:enable-overlooking="true" :scale="scale" show-location="true" @markertap="markertap"
@callouttap="callouttap" :markers="markers" :polyline="polyline" layer-style="1">
<cover-view slot="callout">
<cover-view v-for="(item, index) in markers" :marker-id="item.id" class="customCallout"
:style="{backgroundColor: item.callout.bgColor, borderWidth: item.callout.borderWidth + 'px', borderColor: item.callout.borderColor, borderRadius: item.callout.borderRadius + 'px'}">
<cover-image class="icon" :src="require('@/intelligencepages/public/img/icon-1.png')"></cover-image>
<cover-view class="content"
:style="{fontSize: item.callout.fontSize + 'px', color: item.callout.color}">
{{item.callout.content}}
</cover-view>
</cover-view>
</cover-view>
<cover-view class="exchange_but" :class="isFull ? 'nat' : 'nor'" @click="exchangeMethod"></cover-view>
</map>
js部分
data() {
return {
/* 缩放级别，取值范围为3-20 */
scale: 13,
/* 标记点 */
markers: [],
/* 路线 */
polyline: [],
points: [],
totalData: {},
originPlace: '',
destinationPlace: '',
day_num: 0,
origin: {},
destination: {},
lineData: {
data: []
},
id: '',
tmp_id: '',
/* 行程详情数据 */
tripDetail: {
plan_data: {
}
},
menuButtonRect: {
top: 0
},
isFull: false
}
},
1、
uni.createMapContext(mapId,this)
创建并返回 map 上下文 mapContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <map> 组件
onLoad(option) {
this.mapContext = uni.createMapContext('map',this)
},
在onLoad获取到地图组件mapContext
图片.png
2、通过网络获得数据之后对数据进行处理，绘制标记点和路线
/* 标记起始点 */
let markers = [{
id: 0,
latitude: res.data.plan_data.origin.lat,
longitude: res.data.plan_data.origin.lng,
iconPath: require('@/intelligencepages/public/img/map-marker-1.png'),
width: 8,
height: 8,
callout: {
content: '起点',
color: '#fff',
fontSize: 10,
borderRadius: 1000,
borderColor: '#fff',
borderWidth: 2,
bgColor: '#e83c5c',
padding: 10,
display: 'ALWAYS',
textAlign: 'center',
anchorX: 0,
anchorY: 0
}
}];
/* 遍历添加景点 */
this.tripDetail.plan_data.data.map((i, k) => {
if (i.id != 2000000000) {
markers.push({
id: i.id,
latitude: i.lat,
longitude: i.lng,
iconPath: require(
'@/intelligencepages/public/img/map-marker-1.png'
),
width: 8,
height: 8,
callout: {
content: (k + 1) + '.' + i.name,
color: '#333',
fontSize: 10,
borderRadius: 1000,
borderColor: '#aaa',
borderWidth: 1,
bgColor: '#fff',
padding: 6,
display: 'ALWAYS',
textAlign: 'center',
anchorX: 0,
anchorY: 0
},
customCallout: {
display: 'ALWAYS',
}
})
}
});
/* 终点标记 */
let d = {
id: 2000000000,
latitude: res.data.plan_data.destination.lat,
longitude: res.data.plan_data.destination.lng,
iconPath: require('@/intelligencepages/public/img/map-marker-1.png'),
width: 8,
height: 8,
callout: {
content: '终点',
color: '#fff',
fontSize: 10,
borderRadius: 1000,
borderColor: '#fff',
borderWidth: 2,
bgColor: '#e83c5c',
padding: 10,
display: 'ALWAYS',
textAlign: 'center',
anchorX: 0,
anchorY: 0
}
}
this.markers = markers;
this.markers.push(d);
/* 线路点数组 */
let points = [];
/* 路线的点位 */
this.tripDetail.plan_data.paths.map(s => {
let p = s.split(',')
points.push({
latitude: p[1],
longitude: p[0]
})
})
this.points = points;
this.polyline = [{
points: this.points,
color: '#7b75f1',
width: 6,
borderWidth: 2,
borderColor: '#5142b1',
arrowLine: true,
arrowIconPath: ''
}]
this.mapContext.includePoints({
padding: [50, 50, 10, 50],
points: this.points
})
以上的includePoints是为了展示所有的标记点和路线出来，后台返回的数据和我们的处理方式会有不同，我们可以根据情况自己处理，这里只是一个赋值的过程。
这里是地图组件方法的官网地址：https://uniapp.dcloud.net.cn/api/location/map.html#createmapcontext
网友评论