vue使用原生的高德地图api

vue使用原生的高德地图api

高德地图api的官方网址：https://lbs.amap.com/demo/javascript-api/example/callapp/markonapp
需要去官网申请要使用的对应功能的Key值，具体步骤自己上网查。

1，在vue项目的index.html文件中的head标签中引用：

<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

//<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> //这个引用可能会报错

2，在需要引入地图的页面中使用：

// 跳转到高德地图
        jumpMap(item,type) {
            const AMap = window.AMap;
            let that = this;
            AMap.plugin('AMap.Geocoder', function() {
                var geocoder = new AMap.Geocoder({
                    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                    // city: '020',
                })

                // geocoder.getLocation('北京市海淀区苏州街', function(status, result) {
                //     if (status === 'complete' && result.info === 'OK') {
                //     // result中对应详细地理坐标信息
                //     console.log(result,'-----')
                //     }
                // })
                // 改造高德地图api的方法
                geocoder.getLocation(item);
                AMap.event.addListener(geocoder, 'complete', onComplete);
                AMap.event.addListener(geocoder, 'error', onError);

                function onComplete (data) {
                    // console.log('定位成功信息：', data);
                    let lng = data.geocodes[0].location.lng;
                    let lat = data.geocodes[0].location.lat;
                    if(type == 0) {
                    //带经纬度跳转到高德
                        window.open("https://gaode.com/regeo?lng=" +lng+ "&lat="+lat+ "&name=" + item);
                    }else {
                    //navigater是封装的跳转方法，这里跳转到自己写的地图周边
                        that.navigater('gaoDeAmap?lng=' + lng + '&lat=' + lat);
                    }
                }
                function onError (data) {
                    // console.log('定位失败错误');
                    return
                }
            })
        },

// 获取经纬度信息
        // getLocation () {
            // const AMap = window.AMap;
            //当前定位
            // AMap.plugin('AMap.Geolocation', function () {
            //     var geolocation = new AMap.Geolocation({
            //     // 是否使用高精度定位，默认：true
            //     enableHighAccuracy: true,
            //     // 设置定位超时时间，默认：无穷大
            //     timeout: 10000
            //     })

            //     geolocation.getCurrentPosition()
            //     AMap.event.addListener(geolocation, 'complete', onComplete)
            //     AMap.event.addListener(geolocation, 'error', onError)

            //     function onComplete (data) {
            //         console.log('定位成功纬度信息：', data.position.lat)
            //         console.log('定位成功经度信息：', data.position.lng)
            //     }
            //     function onError (data) {
            //         console.log('定位失败错误：', data)
            //     }
            // })

        // },

3，新建一个vue文件gaoDeAmap.vue：
html:

<template>
<!-- 地图周边 -->
    <div id="gaoDeAmap">
        <div id="container"></div>
        <div id="panel"></div>
    </div>
</template>

js：

<script>
export default {
    data() {
        return {
            aMapLng: '',
            aMapLat: '',
        }
    },

    mounted() {
        this.aMapLng = this.$route.query.lng;
        this.aMapLat = this.$route.query.lat;
        this.getLocation();
    },

    methods: {
       // 获取经纬度信息
        getLocation () {
            const AMap = window.AMap;
            let that = this;
        // 获取地址的经纬度
            // AMap.plugin('AMap.Geocoder', function() {
            //     var geocoder = new AMap.Geocoder({
            //         // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            //         // city: '020',
            //     })

            //     // geocoder.getLocation('北京市海淀区苏州街', function(status, result) {
            //     //     if (status === 'complete' && result.info === 'OK') {
            //     //     // result中对应详细地理坐标信息
            //     //     console.log(result,'-----')
            //     //     }
            //     // })
            //     geocoder.getLocation('北京天安门')
            //     AMap.event.addListener(geocoder, 'complete', onComplete)
            //     AMap.event.addListener(geocoder, 'error', onError)

            //     function onComplete (data) {
            //         console.log('定位成功纬度信息：', data)
            //         console.log('定位成功经度信息：', data)
            //         // _this.latitude = data.position.lat
            //         // _this.longitude = data.position.lng
            //     }
            //     function onError (data) {
            //         console.log('定位失败错误：', data)
            //     }
            // })

        // 搜索周边
            var map = new AMap.Map("container", {
                resizeEnable: true
            });
            AMap.service(["AMap.PlaceSearch"], function() {
                //构造地点查询类
                var placeSearch = new AMap.PlaceSearch({ 
                    type: '', // 兴趣点类别
                    pageSize: 6, // 单页显示结果条数
                    pageIndex: 1, // 页码
                    city: "", // 兴趣点城市
                    citylimit: false,  //是否强制限制在设置的城市内搜索
                    map: map, // 展现结果的地图实例
                    panel: "panel", // 结果列表将在此容器中进行展示。
                    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                });
                
                var cpoint = [that.aMapLng, that.aMapLat]; //中心点坐标
                placeSearch.searchNearBy('', cpoint, 200);
                AMap.event.addListener(placeSearch, 'complete', onComplete)
                AMap.event.addListener(placeSearch, 'error', onError)

                function onComplete (data) {
                    console.log('定位成功信息')
                }
                function onError (data) {
                    console.log('定位失败错误')
                }
            });
        },
    }
}
</script>

css:

<style lang="scss" scoped>
    #gaoDeAmap,#container{
        width: 100%;
        height: 100%;
    }
    #panel {
        position: absolute;
        background-color: white;
        max-height: 90%;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        width: 280px;
    }
</style>

特别注意的是：如果在使用了高德地图（AMap）页面显示是空白的，检查一下代码，要将高德地图相关的方法放到mounted(){}生命周期中，放到created()中会显示不出来