uniapp使用高德JS API

Posted 2023-04-03 Aqiu(web前端)

在uniapp开发学习过程中经常会遇到uniapp内置地图组件map功能不够强大，或者地图层级过高通过nvue等方式解决又会出现其他bug的情况。

这种时候就需要用到第三方提供的地图插件来实现自己想要的效果了。在国内最常用的地图应该就是高德，腾讯，百度等平台开发的地图。

今天就以高德为例详细教大家如何在自己的uniapp项目中使用高德地图。

想要在uniapp中使用高德地图只需要三个步骤。

第一步：申请key

 准备-入门-教程-地图 JS API v2.0|高德地图API (amap.com)

第二步：加载JS API

JSAPI 的加载-入门-教程-地图 JS API v2.0|高德地图API (amap.com)

第三步：初始化地图
快速上手-入门-教程-地图 JS API v2.0|高德地图API (amap.com)

这些都是高德文档上已经有了的就不多赘述了，下面说一些注意事项

1、申请key的时候勾选Web端（JS API）

2、如果要适配手机端，加载JS API时通过renderjs加载。

3、加载的API应当是2.0版本，低于2.0会有定位不准的情况。

4、renderjs在H5中视图层和逻辑层其实都是运行在同一个环境中所以会很顺利，但是在手机端逻辑层无法直接访问视图层的数据。可以通过监听逻辑层的属性改变来实现事件。

5、tenderjs用法示例。

6、加载示例

<template>
	<view style="width:100%;height:500px;" id="container"></view><!-- 必须有宽高 -->
</template>

<script>// 逻辑层
    export default 
        data()
            return 
                // ...
            
        
    
</script>

<script module="test" lang="renderjs">// 视图层
	export default 
		mounted() 
			// ...
		,
        mounted()
            window._AMapSecurityConfig = 
                securityJsCode:'「您申请的安全密钥」',
            
            window.onLoad  = function() 
                var map = new AMap.Map('container');// 初始化地图；container为渲染节点的id
            
            var url = 'https://webapi.amap.com/maps?v=2.0&key=您申请的key值&callback=onLoad';
            var jsapi = document.createElement('script');
            jsapi.charset = 'utf-8';
            jsapi.src = url;
            document.head.appendChild(jsapi);
        ,
		methods: 
			// ...
		
	
</script> 

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

 

 

 

 

 

 

 

.