uniapp 高德地圖組件

 珠蜂上萬的課程，需要私信我

慕客全網最新的都有

----------------------------------------------------------------------------

公眾號:a檸檬初上

---------------------------------------------------------------------------

uniapp-使用高德地圖組件

 

 

 

 

 

1.下載map.js文件

https://lbs.amap.com/api/wx/download

2. 官網map文檔
https://uniapp.dcloud.io/api/location/map?id=createmapcontext

 

<template>
    <view>
        <!-- 地圖 -->
            <map :latitude="latitude"
            :longitude="longitude"
            style="width: 100%; height: 1500rpx;"
            scale="11" 
            :markers="markers"
            :show-location="true"
            @markertap="markertap"
            @updated='mapUpdated'
            @tap='closeMapMarker'
            >
            </map>
        <!--  -->
    </view>
</template>

<script>
    import amap from "../../static/js/amap-wx.js";

    export default {
        data() {
            return {
                // 
                longitude: 115.45875,
                latitude: 38.87757,
                mapInfo: [],
                markers: [],
                mapKey: 'xxxd9deea9898cbe10a00255de5189bc398'　　　　//　　測試
            }
        },
        created() {
            console.log('created=============map')
        },
        onLoad() {
            console.log('onLoad---');
            //
            this.amapPlugin = new amap.AMapWX({
                key: this.mapKey  //該key 是在高德中申請的微信小程序key
            });

            const that = this
            that.amapPlugin.getRegeo({
                type: 'gcj02', //map 組件使用的經緯度是國測局坐標， type 為 gcj02
                success: function(res) {
                    console.log('map 組件使用的經緯度是國測局坐標， type 為 gcj02')
                    console.log(res[0])
                    const latitude = res[0].latitude;
                    const longitude = res[0].longitude;
                    that.longitude = longitude;
                    that.latitude = latitude;
                    that.mapInfo=res[0];
                },
                fail: (res) => {
                    console.log(JSON.stringify(res));
                }
            });
            //    增加地圖標注    
            this.mapMarkers()
        },
        onShow() {
            console.log('show')
        },
        methods:{
            mapMarkers(){
                console.log('markers')
                this.markers = [
                    {
                        id:1001,
                        longitude: '115.45875',
                        latitude: '38.87757',
                        title: '車享匯加油站',
                        // iconPath: 'http://api.myphp.vip/logo.png',
                        iconPath: '/static/icon/map_jiayouicon.png',
                        width: '73rpx',
                        height: '87rpx',
                        callout: {
                            content: '中國石化加油站 686m',
                            color: '#9bf',
                            fontSize: '30rpx',
                            bgColor: 'red',
                            padding: '30rpx',
                            
                        },
                        label: {
                            content: '中國石化加油站 686m',
                            color:'#fff',
                            padding: '10',
                            textAlign: 'center',
                            borderColor: 'red',
                            bgColor: '#ccc',
                            x: '350px',
                            y: '0',
                            opacity:'0.4'
                        }
                    }
                ]
            },
            //    點擊標記時觸發
            markertap(){
                console.log('markertap點擊標記時觸發')
            },
            //mapUpdated
            mapUpdated(){
                console.log('mapUpdated----------在地圖渲染更新完成時觸發')
            },
            //
            closeMapMarker(){
                console.log('closeMapMarker----------點擊地圖時觸發; App-nuve、微信小程序2.9支持返回經緯度')
            },
            
            //
        }
    }
</script>

<style></style>

 

 

判斷：端

onLoad: function() {
            // #ifdef APP-PLUS
            uni.getProvider({
                service: "payment",
                success: (e) => {
                    console.log("payment success:" + JSON.stringify(e));
                    let providerList = [];
                    e.provider.map((value) => {
                        switch (value) {
                            case 'alipay':
                                providerList.push({
                                    name: '支付寶',
                                    id: value,
                                    loading: false
                                });
                                break;
                            case 'wxpay':
                                providerList.push({
                                    name: '微信',
                                    id: value,
                                    loading: false
                                });
                                break;
                            default:
                                break;
                        }
                    })
                    this.providerList = providerList;
                },
                fail: (e) => {
                    console.log("獲取支付通道失敗：", e);
                }
            });
            // #endif

 

 

 

 

 

 

 

.