美文网首页
地图-map

地图-map

作者: 迷失的信徒 | 来源:发表于2023-06-20 09:29 被阅读0次

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

相关文章

  • zabbixApi4j-Map

    Map map.create: 创建新地图map.delete: 删除地图map.exists: 检查地图是否存在...

  • 4种常见用户体验地图速览

    摘要:移情地图(Empathy map),客户旅程地图(customer journey map),体验地图(ex...

  • 接入amap_map_fluttify 0.25.0 高德地图社

    amap_map_fluttify 0.25.0高德地图 地图组件 Flutter插件 第三方库 amap_map...

  • 高德地图 JS API 学习摘要2

    自定义地图 指定Map.mapStyle属性,实现自定义样式地图。 使用Map.setMapStyle()方法,加...

  • 微信小程序地图功能

    想要实现地图功能,首先先来说说显示地图 map,该组件是原生组件。map组件官方文档 第一步:显示地图 在对地图进...

  • uni-app map地图组件应用

    map地图组件使用时直接在template中使用标签,标签中可嵌套map属性 map最常用到...

  • 地图Map

    - (void)viewDidLoad { [super viewDidLoad]; /**创建地图*/ ...

  • Map地图

    MapKit:用于地图展示 CoreLocation:用于地理定位 CoreLocation框架的使用 CLLoc...

  • Map地图

    #import "ViewController.h" #import @interface ViewControl...

  • 地图map

    在页面中引入地图 首先要注册百度地图的开发者账号然后开始创建密钥 新建一个index.html 然后引用百度地图A...

网友评论

      本文标题:地图-map

      本文链接:https://www.haomeiwen.com/subject/snueydtx.html