三方地图 uniapp篇

uniapp篇：

主要是用组件来看基础 定位图标  获取自身经纬度 通过经纬度获取当时城市信息

首先先引入map组件

<template>
    <view class="content">
        <map style="width: 100%; height: 90vh;" :layer-style='5' :style="{height:mapheight}" :show-location='true'
            :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap"
            @callouttap='callouttap'>
        </map>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                latitude:37.900186246845 , //纬度
                longitude:112.5763830113 , //经度
                scale: 13, //缩放级别
                bottomData: false,
                marker: [{
                        id: 0,
                        latitude: 23.13065, //纬度
                        longitude: 113.3274, //经度
                        iconPath: '', //显示的图标        
                        rotate: 0, // 旋转度数
                        width: 20, //宽
                        height: 30, //高
                        //   title:'我在这里',//标注点名
                        alpha: 0.5, //透明度
                        callout: { //自定义标记点上方的气泡窗口 点击有效  
                            content: '天宝大厦', //文本
                            color: '#ffffff', //文字颜色
                            fontSize: 14, //文本大小
                            borderRadius: 15, //边框圆角
                            borderWidth: '10',
                            bgColor: '#e51860', //背景颜色
                            display: 'ALWAYS', //常显
                        },
                    },
                    {
                        id: 1234597,
                        latitude: 23.106574, //纬度
                        longitude: 113.324587, //经度
                        iconPath: '', //显示的图标        
                        rotate: 0, // 旋转度数
                        width: 20, //宽
                        height: 30, //高
                        //  title:'我在这里',//标注点名
                        alpha: 0.5, //透明度
                        //      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
                        //   color:'red',//文本颜色
                        //      },
                        callout: { //自定义标记点上方的气泡窗口 点击有效  
                            content: '广州塔', //文本
                            color: '#ffffff', //文字颜色
                            fontSize: 14, //文本大小
                            borderRadius: 15, //边框圆角
                            borderWidth: '10',
                            bgColor: '#e51860', //背景颜色
                            display: 'ALWAYS', //常显
                        },
                    },
                    {
                        id: 2,
                        latitude: 23.1338, //纬度
                        longitude: 113.33052, //经度
                        iconPath: '../../static/好看.jpg', //显示的图标        
                        rotate: 0, // 旋转度数
                        width: 20, //宽
                        height: 30, //高
                        alpha: 0.5, //透明度
                        callout: { //自定义标记点上方的气泡窗口 点击有效  
                            content: '德隆大厦', //文本
                            color: '#ffffff', //文字颜色
                            fontSize: 14, //文本大小
                            borderRadius: 15, //边框圆角
                            borderWidth: '10',
                            bgColor: '#e51860', //背景颜色
                            display: 'ALWAYS', //常显
                        },
                    },
                    {
                        id: 3,
                        latitude: 23.136455, //纬度
                        longitude: 113.329002, //经度
                        iconPath: '', //显示的图标        
                        rotate: 0, // 旋转度数
                        width: 20, //宽
                        height: 30, //高
                        alpha: 0.5, //透明度
                        callout: { //自定义标记点上方的气泡窗口 点击有效  
                            content: '羊城国际商贸中心', //文本
                            color: '#ffffff', //文字颜色
                            fontSize: 14, //文本大小
                            borderRadius: 15, //边框圆角
                            borderWidth: '10',
                            bgColor: '#e51860', //背景颜色
                            display: 'ALWAYS', //常显
                        },
                    },
                    {
                        id: 4,
                        latitude: 23.224781, //纬度
                        longitude: 113.293911, //经度
                        iconPath: '', //显示的图标        
                        rotate: 0, // 旋转度数
                        width: 20, //宽
                        height: 30, //高
                        alpha: 0.5, //透明度
                        callout: { //自定义标记点上方的气泡窗口 点击有效  
                            content: '天瑞广场A座', //文本
                            color: '#ffffff', //文字颜色
                            fontSize: 16, //文本大小
                            borderRadius: 15, //边框圆角
                            borderWidth: '12',
                            bgColor: '#e51860', //背景颜色
                            display: 'ALWAYS', //常显
                        },
                    },
                    {
                        id: 5,
                        latitude: 23.072726, //纬度
                        longitude: 113.277921, //经度
                        iconPath: '', //显示的图标        
                        rotate: 0, // 旋转度数
                        width: 20, //宽
                        height: 30, //高
                        alpha: 0.5, //透明度
                        callout: { //自定义标记点上方的气泡窗口 点击有效  
                            content: '大米和小米儿童康复(广州盈丰)中心', //文本
                            color: '#ffffff', //文字颜色
                            fontSize: 14, //文本大小
                            borderRadius: 15, //边框圆角
                            borderWidth: '8',
                            bgColor: '#e51860', //背景颜色
                            display: 'ALWAYS', //常显
                        },
                    },
                ],
            }
        },
        computed: {
            mapheight() {
                let data = ''
                if (this.bottomData) {
                    if (this.upTop) {
                        data = '50px'
                    } else {
                        data = '200px'
                    }
                } else {
                    data = '90vh'
                }
                return data
            },
            coverbottom() {
                let data = ''
                if (this.bottomData) {
                    data = '20rpx'
                } else {
                    data = '100rpx'
                }
                return data
            }
        },
        methods: {//地图点击事件
            markertap(e) {
                console.log("===你点击了标记点===", e)
            },
            //地图点击事件
            callouttap(e) {
                console.log('地图点击事件', e)
            },
        },
        }
</script>

样：得到的样式就是这

然后就是定位图标：

因为官方文档没有那就自己手写一个大概代码如下：

 备注也非常详细可以根据自己的需求去修改：

下来就是获取经纬度：

mounted() {

const latitude = this.latitude;

const longitude = this.longitude;

console.log("纬度：", latitude);

console.log("经度：", longitude); }

在下面方法写上去就可以自动获取当前经纬度