---

腾讯地图

腾讯地图API学习-官方地址：https://lbs.qq.com/webDemoCenter/glAPI/glServiceLib/geocoderGetLocation

个人博客地址：

---

基础入门

1. 初始化地图：

方式一

this.latLng = new qq.maps.LatLng( lat, lng );// 初始化默认坐标(入参：经纬度）
                // this.mapDetail = new qq.maps.Map( 目标DOM节点 ), {// 默认地图模式
                    zoom: 13,// 设置地图缩放级别
                    center: this.latLng,// 设置地图中心点坐标
                });

方式二

this.latLng = new TMap.LatLng( lat, lng );// 初始化默认坐标(入参：经纬度）
                this.mapDetail = new TMap.Map( 目标DOM节点 ), {// 默认地图模式
                    zoom: 13,// 设置地图缩放级别
                    center: this.latLng,// 设置地图中心点坐标
                });

事件监听

1. 监听地图瓦片加载完成事件

监听地图瓦片加载完成事件

let that = this
                // 监听地图瓦片加载完成事件
                this.mapDetail.on("tilesloaded", function () {
                    console.log(`腾讯地图加载完成`);
                })

移除缩放控件 & 旋转控件 & 比例尺控件

console.log(`移除缩放控件 & 旋转控件 & 比例尺控件`);

                let toDeleteArr = ['ZOOM', 'ROTATION', 'SCALE']
                toDeleteArr.map(i => {
                    if (this.mapDetail.getControl(TMap.constants.DEFAULT_CONTROL_ID[i])) this.mapDetail.removeControl(TMap.constants.DEFAULT_CONTROL_ID[i]);
                })

初始化marker图层

console.log(`初始化marker图层`);

                this.markerLayer = new TMap.MultiMarker({
                    id: `marker-layer`,
                    map: this.mapDetail,
                    styles: {
                        // 点标记样式：marker
                        marker: new TMap.MarkerStyle({
                            width: 25, // 样式宽
                            height: 40, // 样式高
                            anchor: { x: 10, y: 30 }, // 描点位置
                            // src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',// 引入自定义大头针图标
                        }),
                    },
                });

创建信息窗

console.log(`创建信息窗`);

                this.info = new TMap.InfoWindow({
                    map: this.mapDetail,
                    position: this.mapDetail.getCenter(),
                    offset: { x: -3, y: -35 } //设置信息窗相对position偏移像素
                }).close();
                console.dir(this.info.dom);

点击地图拾取坐标

let that = this

                //绑定点击事件
                this.mapDetail.on("click", function( evt ) {
                    var lat = evt.latLng.getLat().toFixed(7);
                    var lng = evt.latLng.getLng().toFixed(7);

                    console.log(`当前点击的坐标为：${ lat }, ${ lng }`);
                    that.inglatXY = [ lng, lat ]
                    that.getDetailAddress( lat, lng );
                    that.toMarker( lat, lng );
                    that.mapDetail.panTo(new qq.maps.LatLng(lat, lng))
                })

打点标记

去进行打点标记
if (this.markerLayer) {
                    this.removeMarker();
                    this.toCreateMarkerLayer();
                }

                this.markerLayer.add({
                    position: new TMap.LatLng( lat, lng ),
                    styleId: 'marker',// 应用自定义样式
                });
                console.log(this.markerLayer.geometries[0].position, `markerLayer`);

创建折线对象

内容如下：

toCreateMultiPolyline() {
        console.log(`创建折线对象 ~ 腾讯地图 API`);

        this.multiPolyline = new TMap.MultiPolyline({
            id: `polyline-layer`,
            map: this.mapDetail,
            styles: {
                style_blue: new TMap.PolylineStyle({
                    color: "#3777FF", // 线填充色
                    width: 6, // 折线宽度
                    borderWidth: 5,
                    // borderColor: "#d12921", // 边线颜色
                    borderColor: "#fff", // 边线颜色
                    // lineCap: "square",// 线端头方式 - butt - round
                    lineCap: "butt",// 线端头方式 - butt
                    showArrow: true, // 是否沿线方向展示箭头
                    arrowOptions: {
                        width: 8,
                        height: 5,
                        space: 80,
                    },
                }),
            },
        })
    },

    toAddMultiPolyline( paths ) {
        console.log(`添加折线`, paths);

        this.multiPolyline.add({
            styleId: 'style_blue',// 应用自定义样式
            paths,
        });
    },

反解析成详细地址

let geocoder = new qq.maps.Geocoder();// 初始化geocoder
                let latLng = new qq.maps.LatLng( lng, lat );
                geocoder.getAddress( latLng );
                geocoder.setComplete(result => {
                    this.detailAddress = result.detail.address;
                    console.log(`地址：`, this.detailAddress);
                    this.toShowPOI( { poi: { name: this.detailAddress, latLng } } );
                });
                geocoder.setError( err => {
                    this.$message.warning(`解析地址出错`);
                });

根据输入详细地址 反解析成经纬度

let _this = this
                if (val) {
                    let geocoder = new qq.maps.Geocoder();// 初始化geocoder
                    geocoder.getLocation(val)
                    geocoder.setComplete(result => {
                        const { lat, lng } = result.detail.location;
                        let latLng = new qq.maps.LatLng(lat, lng);
                        this.latitude = lat;
                        this.longitude = lng;

                        this.toMarker( lat, lng )
                        this.toShowPOI( { poi: { name: result.detail.address, latLng } } );
                        this.mapDetail.panTo(new qq.maps.LatLng(lat, lng))
                        console.log(result.detail, 'getXYByDetailAddress');
                    })
                    geocoder.setError(err => {
                        console.log(`解析错误，请输入正确地址`);
                        // this.$message.warning(`解析错误，请输入正确地址`);
                    });

腾讯地图（GL版本，JavaScriptV2版本比较学习）

<template>
    <div class="addMarker">
        <el-input class="search-part" size="small" v-model="searchAddress" clearable
                  placeholder="请输入详细地址(回车搜索)" @keydown.enter.native="getXYByDetailAddress(searchAddress)"
                  v-if="!disabled">
            <template slot="prefix">
                <i class="el-icon-search" @click="getXYByDetailAddress(searchAddress)"></i>
            </template>
        </el-input>
        <div id="mapDiv"></div>
    </div>
</template>

<script>
    export default {
        name: "addMarker",
        props: {
            inglatXYProp: {
                type: Array,
                default: () => []
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        beforeDestroy() {
            this.toMapDestroy();
        },
        mounted() {
            this.initMap();

            this.toCreateMarkerLayer();
            this.toCreateInfoWindow();
            if(!this.disabled) {
                this.toPickCoordinates();
            }
            this.toMarker( this.inglatXYProp[1], this.inglatXYProp[0] );
            this.getDetailAddress( this.inglatXYProp[1], this.inglatXYProp[0] );
            
            if(this.disabled) {
                var localMarker = new qq.maps.Marker({
                    position: latLng,
                    map: this.mapDetail
                });
            }
        },
        data() {
            return {
                //点标记
                marker: null,
                //信息窗体
                infoWindow: null,
                //地图
                amap: null,
                //经纬度 [lng,lat]
                inglatXY: [],
                //详细地址
                detailAddress: '',
                //当前所在城市的center经纬度
                locationXY: [],
                //搜索框绑定的--详细地址
                searchAddress: '',
                markersArray: [],
                mapDetail: null,
                latLng:null
            }
        },
        watch: {
            inglatXY(val, oldV) {
                this.$emit('change', val)
            }
        },
        methods: {
            initMap() {
                /**
                 * https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverview 腾讯地图 javascriptGL 写法
                 */
                // this.latLng = new TMap.LatLng( this.inglatXYProp[1], this.inglatXYProp[0] );// 初始化默认坐标
                // this.mapDetail = new TMap.Map(document.getElementById("mapDiv"), {// 默认地图模式
                //     zoom: 13,// 设置地图缩放级别
                //     center: this.latLng,// 设置地图中心点坐标
                // });

                /**
                 * https://lbs.qq.com/webDemoCenter/javascriptV2/control/controlDisableDefaultUI 腾讯地图 javascriptV2 写法（2d版本）
                 */
                this.latLng = this.toGetLatLng( this.inglatXYProp[1], this.inglatXYProp[0] );// 初始化默认坐标（lat, lng）
                this.mapDetail = new qq.maps.Map(document.getElementById("mapDiv"), {
                    disableDefaultUI: true,//禁止所有控件
                    zoom: 13,
                    center: this.latLng,
                });
            },

            toCreateMarkerLayer() {
                /**
                 * 腾讯地图 javascriptGL 写法
                 */
                // this.markerLayer = new TMap.MultiMarker({
                //     id: `marker-layer`,
                //     map: this.mapDetail,
                //     styles: {
                //         marker: new TMap.MarkerStyle({
                //             width: 25, // 样式宽
                //             height: 40, // 样式高
                //             anchor: { x: 10, y: 30 }, // 描点位置
                //         }),
                //     },
                // });

                /**
                 * 腾讯地图 javascriptV2 写法（2d版本）
                 */
                this.markerLayer = new qq.maps.Marker({
                    map: this.mapDetail,
                    // icon: ``,// 自定义标记图标
                });
            },

            toMarker( lat, lng ) {
                if (this.markerLayer) {
                    this.removeMarker();
                    this.toCreateMarkerLayer();
                }

                /**
                 * 腾讯地图 javascriptGL 写法
                 */
                // this.markerLayer.add({
                //     position: new TMap.LatLng( lat, lng ),
                //     styleId: 'marker',// 应用自定义样式
                // });

                /**
                 * 腾讯地图 javascriptV2 写法（2d版本）
                 */
                this.markerLayer.position = this.toGetLatLng( lat, lng );
            },

            removeMarker() {
                console.log(`移除marker事件`);

                this.markerLayer.setMap(null);
                this.markerLayer = null;
            },

            toMapDestroy() {
                console.log(`销毁腾讯地图`);

                /**
                 * 腾讯地图 javascriptGL 写法
                 */
                // this.mapDetail.destroy();

                /**
                 * 腾讯地图 javascriptV2 写法（2d版本）
                 * 没有找到，应该是老版本没有该方法
                 */
            },

            tilesloaded() {
                // let that = this

                /**
                 * 腾讯地图 javascriptGL 写法
                 * 监听地图瓦片加载完成事件
                 */
                // this.mapDetail.on("tilesloaded", function () {
                //     console.log(`腾讯地图加载完成`);
                //     // that.$message.success(`腾讯地图加载完成`);
                // })

                /**
                 * 腾讯地图 javascriptV2 写法（2d版本）
                 * 没有找到，应该是老版本没有该方法
                 */
            },

            removeControl() {
                console.log(`移除缩放控件 & 旋转控件 & 比例尺控件`);

                /**
                 * 腾讯地图 javascriptGL 写法
                 */
                // let toDeleteArr = ['ZOOM', 'ROTATION', 'SCALE']
                // toDeleteArr.map(i => {
                //     if (this.mapDetail.getControl(TMap.constants.DEFAULT_CONTROL_ID[i])) this.mapDetail.removeControl(TMap.constants.DEFAULT_CONTROL_ID[i]);
                // })

                /**
                 * 腾讯地图 javascriptV2 写法（2d版本）
                 * 老版本是通过地图初始化传入属性控制
                 */
            },

            toPickCoordinates() {
                let that = this

                /**
                 * 腾讯地图 javascriptGL 写法
                 */
                // this.mapDetail.on("click", function( evt ) {
                    // var lat = evt.latLng.getLat().toFixed(7);
                //     var lng = evt.latLng.getLng().toFixed(7);

                //     that.inglatXY = [ lng, lat ]
                //     that.getDetailAddress( lat, lng );
                //     that.toMarker( lat, lng );
                // })

                /**
                 * 腾讯地图 javascriptV2 写法（2d版本）
                 * 添加监听事件
                 */
                qq.maps.event.addListener(this.mapDetail, 'click', function( evt ) {
                    console.log(`您点击了地图：经度：${ evt.latLng.lng }, 纬度：${ evt.latLng.lat }`, evt);

                    var lat = evt.latLng.lat.toFixed(7);
                    var lng = evt.latLng.lng.toFixed(7);

                    that.inglatXY = [ lng, lat ]
                    that.getDetailAddress( lat, lng );
                    that.toMarker( lat, lng );
                });
            },

            toCreateInfoWindow() {
                if(this.info) {
                    this.info.close()
                }
                
                /**
                 * 腾讯地图 javascriptGL 写法
                 */
                // this.info = new TMap.InfoWindow({
                //     map: this.mapDetail,
                //     position: this.mapDetail.getCenter(),
                //     offset: { x: 3, y: -35 } //设置信息窗相对position偏移像素
                // }).close();

                /**
                 * 腾讯地图 javascriptV2 写法（2d版本）
                 * 没有找到，应该是老版本没有该方法
                 */
                this.info = new qq.maps.InfoWindow({
                    map: this.mapDetail,
                });
            },

            toGetLatLng( lat, lng ) {
                return new qq.maps.LatLng( lat, lng )
            },

            toShowPOI( evt ) {
                console.log(`点击地图拾取POI`);

                // 获取click事件返回的poi信息
                let poi = evt.poi;
                if (poi) {
                    // 拾取到POI
                    /**
                     * 腾讯地图 javascriptGL 写法
                     */
                    // this.info.setContent( poi.name ).setPosition( new TMap.LatLng( poi.latLng.lat, poi.latLng.lng ) ).open();

                    /**
                     * 腾讯地图 javascriptV2 写法（2d版本）
                     * 没有找到，应该是老版本没有该方法
                     */
                    this.info.setContent( poi.name )
                    this.info.setPosition( this.toGetLatLng( poi.latLng.lat, poi.latLng.lng ) )
                    this.info.open();
                } else {
                    // 没有拾取到POI
                    this.info.close();
                }
            },

            setLocationByLatLng( lat, lng ) {
                setTimeout(() => {
                    let latLng = this.toGetLatLng( lat, lng );
                    this.geocoder.getAddress(latLng);
                });
            },

            getXYByDetailAddress(val) {
                let _this = this
                if (val) {
                    let geocoder = new qq.maps.Geocoder();// 初始化geocoder
                    geocoder.getLocation(val)
                    geocoder.setComplete(result => {
                        const { lat, lng } = result.detail.location;
                        this.latitude = lat;
                        this.longitude = lng;

                        this.inglatXY = [lng, lat]
                        
                        this.getDetailAddress( lat, lng );

                        this.toMarker( lat, lng )
                        console.log(this.mapDetail.panTo( this.toGetLatLng( lat, lng ) ));
                    })
                    geocoder.setError(err => {
                        console.log(`解析错误，请输入正确地址`);
                    });
                }
            },
            
            getDetailAddress( lat, lng ) {
                let geocoder = new qq.maps.Geocoder();// 初始化geocoder
                let latLng = this.toGetLatLng( lat, lng );
                geocoder.getAddress( latLng );
                geocoder.setComplete(result => {
                    console.log(`地址：`, result);
                    this.detailAddress = result.detail.address;
                    
                    console.log(`地址：`, this.detailAddress);
                    this.toShowPOI( { poi: { name: this.detailAddress + '(' + latLng + ')', latLng } } );
                });
                geocoder.setError( err => {
                    this.$message.warning(`解析地址出错`);
                });
            },
        }
    }
</script>

<style lang="scss">
    .addMarker {
        position: relative;

        .search-part {
            width: 350px;
            margin-right: 10px;
            position: absolute;
            z-index: 1110;
            top: 14px;
            left: 12px;

            .el-input__inner {
                height: 45px;
                line-height: 46px;
                opacity: 0.96;
            }

            .el-input__prefix {
                cursor: pointer;
            }
        }

        #mapDiv {
            width: 100%;
            height: 400px;

            border: 1px solid #666;
        }
    }
</style>