一、注册账号

二、申请一个key

三、使用

在vue项目中的index.html文件中引入代码：

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=2.exp&libraries=service&key=申请的key值"></script>

gljs一开始可以不写，因为我用到了坐标(点标记),所以需要加上这个。

四、开发文档

写一下我的功能点：点击地图某个点，然后用经纬度转换成地址显示在第一个input框。

<el-form-item label="店铺地址：" prop="selectedOptions">
        <el-input v-model="storeForm.selectedOptions" placeholder="选择地图上的点自动填充"></el-input>
        <el-input v-model="storeForm.address" placeholder="请输入详细地址"></el-input>
        <div id="container" style="width:500px;height:400px;margin-top: 20px;"></div>
</el-form-item>


<script>
var _this;
var marker = null;
var map = null;
export default{
    data(){
        storeForm:{
            latitude: '',
            longitude: ''
        }
    },
    mounted(){
        this.init();
        _this = this;
    },
    methods: {
        init() {
            var center = new TMap.LatLng(this.storeForm.latitude, this.storeForm.longitude);
            //初始化地图
            map = new TMap.Map("container", {
                    rotation: 20, //设置地图旋转角度
                    pitch: 30, //设置俯仰角度（0~45）
                    zoom: 14, //设置地图缩放级别
                    center: center, //设置地图中心点坐标
                    viewMode: "2D",
            });

            var clickHandler = function(evt) {
                    console.log("地图绑定事件", evt);
                    var lat = evt.latLng.getLat().toFixed(6);
                    var lng = evt.latLng.getLng().toFixed(6);
                    _this.storeForm.latitude = lat; //纬度
                    _this.storeForm.longitude = lng; // 经度
                    console.log(_this.storeForm.latitude, _this.storeForm.longitude);
                    console.log("marker", marker);
                    // 如果有标记
                    if (marker) {
                        // setMap 将已经添加的控件移除，需要在使用 setMap() 方法 marker.setMap(null)
                        // marker.setMap(map); 
                        marker.setGeometries([
                            {
                                // 标记位置(纬度，经度，高度)
                                id: "1",
                                styleId: "myStyle",
                                position: evt.latLng,
                            },
                        ]);
                    } else {
                        marker.add({
                            position: evt.latLng,
                        });
                    }
                    _this.convert(lat, lng);
            };

            // //Map实例创建后，通过on方法绑定点击事件
            map.on("click", clickHandler);

            // 点标记的默认样式
            marker = new TMap.MultiMarker({
                map: map,
                styles: {
                    // 点标记样式
                    myStyle: new TMap.MarkerStyle({
                            width: 20, // 样式宽
                            height: 30, // 样式高
                            anchor: { x: 16, y: 32 }, // 描点位置
                    }),
                },
                geometries: [
                    // 点标记数据数组
                    {
                        // 标记位置(纬度，经度，高度)
                        id: "1",
                        styleId: "myStyle",
                        position: new TMap.LatLng(
                            this.storeForm.latitude,
                            this.storeForm.longitude
                        ),
                    },
                ],
            });
        },
        // 坐标转地址
        convert(lat, lng) {
            var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
            var location = new TMap.LatLng(lat, lng);
            console.log("坐标转地址，", location);
            marker.updateGeometries([
                {
                    id: "1", // 点标注数据数组
                    styleId: "myStyle",
                    position: location,
                },
            ]);
            // 将给定的坐标位置转换为地址
            geocoder.getAddress({ location: location }).then((result) => {
                // 显示搜索到的地址
                _this.storeForm.selectedOptions = result.result.address;
            });
        },
    }
}
</script>

其实不是很难，仔细看文档，多尝试就能很快的应用了，但我研究了三天……