VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >

  • uni-app 地图全解析+事件监听

最近找到了一篇uni-app的地图解决方案精品文章，这里分享给大家，希望对大家有所帮助

转载地址：https://blog.csdn.net/cplvfx/article/details/111447466

1
2
3
前置条件：你需要阅读
 
https://uniapp.dcloud.io/component/map

先看图

 

事件监听-属性说明

1
2
3
这个表也是官方的
 
标红的是我用到的

使用

html

我这里用了“@markertap”点击标记点时触发事件， “@tap”点击地图时触发事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
    <view class="content">
 
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view class="page-body">
            <view class="page-section page-section-gap map" style="width: 100%; height: 900rpx;">
                <map style="width: 100%; height: 100%;" scale='15' :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="markertap" @tap="tap" @updated="updated">
                </map>
            </view>
        </view>
    </view>
</template>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<script>
    export default {
        data() {
            return {
                title: '百度地图',
                latitude: 34.7586,
                longitude: 113.672307,
                covers: [] //标记点地图数据
            }
        },
        onLoad() {
            this.init();
        },
        methods: {
            init() {
                let that = this;
                console.log("init()")
                //发起网络请求获取数据
                //用uni.request(OBJECT)方法
                //我这里模拟下数据
                var data = [{
                    id: 1,
                    name: '雷军',
                    imgUrl:'../../static/user.png',
                    lat: "34.7586",
                    lng: "113.672307"
                },{
                    id: 2,
                    name: '李彦宏',
                    imgUrl:'../../static/user.png',
                    lat: "34.763466",
                    lng: "113.686285"
                },{
                    id: 3,
                    name: '马化腾',
                    imgUrl:'../../static/user.png',
                    lat: "34.763412",
                    lng: "113.680185"
                }, ];
                that.MapData(that,data)
            },
            //地图数据初始化
            MapData(that, data) {
                console.log(data.length)
                console.log(data)
                let arrayData = [];
                for (var i = 0; i < data.length; i++) {
                    arrayData.push({
                        id: data[i].id, //marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。
                        latitude: data[i].lat, //纬度
                        longitude: data[i].lng, //经度
                        title: data[i].name, //点击时显示，callout存在时将被忽略
                        iconPath:data[i].imgUrl, //项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径
                        width: 60,
                        height: 60,
                        callout: {
                            //自定义标记点上方的气泡窗口
                            content: data[i].name,
                            color: '', //文本颜色
                            fontSize: 16, //文字大小
                            borderRadius: 20, //callout边框圆角
                            bgColor: '', //背景色
                            padding: 6, //文本边缘留白
                            display: 'BYCLICK', //'BYCLICK':点击显示; 'ALWAYS':常显
                            textAlign: 'left', //文本对齐方式。有效值: left, right, center
                        },
                        label: {
                            //为标记点旁边增加标签
                            content: '', //标记点旁边的文字
                            color: '#ff6600', //文本颜色
                            fontSize: 16, //文字大小
                            x: 0, //label的坐标，原点是 marker 对应的经纬度
                            y: 0, //label的坐标，原点是 marker 对应的经纬度
                            borderWidth: 1, //边框宽度
                            borderColor: '', //边框颜色
                            borderRadius: 10, //边框圆角
                            bgColor: 'red',
                            padding: 6, //  文本边缘留白
                            textAlign: 'left', //文本对齐方式。有效值: left, right, center
                        },
                        anchor: {
                            //经纬度在标注图标的锚点，默认底边中点      {x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点
                            x: .5,
                            y: 1
                        }
                    });
                }
                console.log(arrayData.length)
                console.log(arrayData)
                //重新给地图数据赋值covers
                that.covers = arrayData;
            },
            //地图点击事件
            markertap(e) {
                console.log("===你点击了标记点===")
                console.log("你点击的标记点ID是:" + e.detail.markerId)
                //console.log(e)
            },
            //点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度
            tap(e){
                console.log("===你点击了地图点===")
                console.log(e)
            },
            //在地图渲染更新完成时触发
            updated(e){
                console.log("===在地图渲染更新完成时触发===")
                console.log(e)
            }
        }
    }
</script>

说明：

其中标记点图片为什么是圆形的在你的项目跟目录找到App.vue,放入下面代码

1
2
3
4
5
6
7
<style>
    /*每个页面公共css */
    img.csssprite {
        border-radius: 50px !important;
        border: 1px #c7c7c7 solid !important;
    }
</style>

 

 

 

 
  • 本文作者： 林恒
  •  

    
    相关教程