代码探险家

这个屌丝很懒，什么也没留下！

热门标签

《前端开发实践之腾讯地图API 学习》_new qq.maps.geocoder

作者：代码探险家 | 2024-08-11 20:48:27

踩

new qq.maps.geocoder

腾讯地图

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

在这里插入图片描述

个人博客地址：

基础入门

1. 初始化地图：
1

方式一

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

方式二

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

事件监听

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

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

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

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

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]);
                })
1
2
3
4
5
6

初始化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',// 引入自定义大头针图标
                        }),
                    },
                });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

创建信息窗

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);
1
2
3
4
5
6
7
8

点击地图拾取坐标

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))
                })
1
2
3
4
5
6
7
8
9
10
11
12
13

打点标记

去进行打点标记
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`);
1
2
3
4
5
6
7
8
9
10
11

创建折线对象

内容如下：

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,
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

反解析成详细地址

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(`解析地址出错`);
                });
1
2
3
4
5
6
7
8
9
10
11

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

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(`解析错误，请输入正确地址`);
                    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

腾讯地图（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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/966029

《前端开发 实践之 腾讯地图API 学习》_new qq.maps.geocoder

目录