vue 获取坐标及调用腾讯地图-蒲公英云

vue 获取坐标及调用腾讯地图

水深无声 2022-09-12 01:43 443阅读 0赞

addrHand() {
                let that = this
                console.log(that.jobsUserId)
                $.ajax({
                    type: "get",
                    dataType: 'jsonp',
                    data: {
                        key: "youkey", // 填申请到的腾讯key
                        address:that.address, //具体的地址
                        output: 'jsonp' //返回格式：支持JSON/JSONP，默认JSON
                    },
                    jsonp: "callback",
                    jsonpCallback: "QQmap",
                    url: "https://apis.map.qq.com/ws/geocoder/v1/?",
                    success: function(json) {
                        console.log(that.address)
                        if (json.status == 0) {
                            that.latitude = json.result.location.lat
                            that.longitude = json.result.location.lng
                            that.map(that.latitude,that.longitude)
                            that.$message({
                                message: '成功获取位置的经纬度',
                                type: 'success'
                            })
                        } else {
                            that.$message.error('获取该位置经纬度失败')
                        }
                    },
                    error: function(err) {
                        that.$message.error('异常错误，请刷新浏览器后重试')
                    }
                })
            },
            map(latitude,longitude) {
                     var center = new TMap.LatLng(latitude, longitude);//设置中心点坐标
                     //初始化地图
                     var map = new TMap.Map(container, {
                         center: center
                     });  
                     //初始化marker
                     var marker = new TMap.MultiMarker({
                         id: "marker-layer", //图层id
                         map: map,
                         styles: { //点标注的相关样式
                             "marker": new TMap.MarkerStyle({
                                 "width":50,
                                 "height":50,
                                 "anchor": { x: 16, y: 32 },
                                 "src": "../../static/img/marker.png"
                             })
                         },
                         geometries: [{ //点标注数据数组
                             "id": "demo",
                             "styleId": "marker",
                             "position": new TMap.LatLng(latitude, longitude),
                             "properties": {
                                 "title": "marker"
                             }
                         }]
                     });
            },
 index.html
 <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=youkey"></script>