腾讯地图

下面包括的方法有：地图展示、多边形地图展示、地图点击事件、动态改变缩放、坐标逆解析地址用jsonp。

<template>
    <div>
        map ......
        <div id='container'></div>
    </div>
</template>
<script>
// 注意：用的时候 this.$jsonp! 不要问我也不知道
import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
export default {
    data() {
        return {

        }
    },
    mounted() {
        // 3d地图显示
        this.get3D()

        // 多边形地图展示
        // this.getPolygon()
    },
    methods:{
        /* 
            3d地图显示
        */
        get3D() {
            //定义地图中心点坐标
            //   {"latitude":40.03658,"longitude":116.37239,"text":"海淀区清河康健宝盛广场(宝盛路南50米)"}
            var center = new TMap.LatLng(40.03658, 116.37239)
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            var map = new TMap.Map(document.getElementById('container'), {
                center: center,//设置地图中心点坐标
                zoom: 17.2,   //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45    //设置地图旋转角度
            });


            // 点击事件
            map.on("click",this.clickMap)

        },
        /* 动态改变缩放 */
        changeZoom() {
            setTimeout(()=>{
                map.zoomTo(10)
            },3000)
        },
        /* 点击事件 */
        clickMap(val){
            console.log(val,'val.....')

            this.lat = val.latLng.lat
            this.lng = val.latLng.lng
            // 坐标逆解析成地址
            this.getAdrress()

            /* 通过off方法解绑点击事件 */
            // map.off("click",this.clickMap);
        },
        getAdrress() {
            // json 存在跨域问题   ，所以选择用了json
            // npm install --save vue-jsonp   下载jsonp
             let url ='https://apis.map.qq.com/ws/geocoder/v1/?output=jsonp'
            this.$jsonp(url,{
              key: 'HEXBZ-HLJ65-SXKIB-Q7KLK-5ETPF-ZPBWI',
              location: this.lat+ ',' + this.lng
            })
            .then(json => {
                // console.log(json,'1111')
                // 点击小区的某栋楼，只能具体到小区名称，具体不到点的是那栋楼
                console.log(json.result.formatted_addresses,'9999') //附近街道地址信息
            })
            .catch(err => {
                    console.log(err)
            })
        },
        /* 多边形地图展示 */
        getPolygon() {
            var map = new TMap.Map('container', {
                center: new TMap.LatLng(40.038515, 116.272185),//地图显示中心点
                // zoom:16, //缩放级别
                // pitch: 43.5,  //设置俯仰角
                zoom: 17.2,   //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45    //设置地图旋转角度
            });
            var path = [
                [40.03854009824492,116.26174449920654],
                [40.03854009824492,116.26260280609131],
                [40.03870438053774,116.26341819763184],
                [40.038342958971086,116.26384735107422],
                [40.037882965115706,116.26423358917236],
                [40.03768582394209,116.2642765045166],
                [40.037455825185845,116.26311779022217],
                [40.037258682777356,116.26328945159912],
                [40.03719296851454,116.26243114471436],
                [40.037488682198514,116.26165866851807],
                [40.03791582192258,116.26208782196045],
                [40.038178675807515,116.26140117645264],
                [40.03847438521698,116.26140117645264]
            ]
            //转为LatLng数组
            path = path.map(p => {
                return new TMap.LatLng(p[0], p[1]);
            });
            
            //初始化polygon
            var polygon = new TMap.MultiPolygon({
                id: 'polygon-layer', //图层id
                map: map, //设置多边形图层显示到哪个地图实例中
                //多边形样式
                styles: {
                    'polygon': new TMap.ExtrudablePolygonStyle({
                        'color': 'rgba(0,125,255,0.7)', //面填充色
                        'showBorder':false, //是否显示拔起面的边线
                        'extrudeHeight':30, //多边形拔起高度
                        'borderColor': '#999' //边线颜色
                    })
                },
                //多边形数据
                geometries: [
                    {
                        'id': 'p1', //该多边形在图层中的唯一标识（删除、更新数据时需要）
                        'styleId': 'polygon', //绑定样式名
                        'paths': path, //多边形轮廓
                    }
                ]
            });
        }

    }
}
</script>
<style scoped>
.container{
    width: 600px;
    height: 600px;
    /* width: 100vw; */
    /* height: 100vh; */
}
</style>

    <!-- 腾讯地图 -->
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=HEXBZ-HLJ65-SXKIB-Q7KLK-5ETPF-ZPBWI"></script>