vue3 腾讯地图输入地址或拖动标记获取经纬度

余温无痕

3655人浏览 · 2022-07-20 17:13:01

余温无痕 · 2022-07-20 17:13:01 发布

先看效果，经纬度没有显示出来，要显示经纬度多增加一个input就行了

正文

1、首先你要去腾讯位置服务申请key腾讯位置服务 - 立足生态，连接未来腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案；有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。https://lbs.qq.com/

2、在index.html中加载腾讯API服务，这里要特别注意“?v=2.exp”，版本不同使用的方法函数就不一样，这里我用的是v2版本。

2.1、v参数是引用的版本号，目前腾讯地图提供两个版本，分别是v=1，v=2.exp，推荐使用2.exp，可以获得最新最快的支持。


// v1版本创建map对象，初始化地图
var map = new TMap.Map('container', {
    center: new TMap.LatLng(39.984120,116.307484), //设置地图中心点坐标
    zoom:11,   //设置地图缩放级别
    pitch: 43.5,  //设置俯仰角
    rotation: 45    //设置地图旋转角度
});

// v2版本
function init() {
  var myLatlng = new qq.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: qq.maps.MapTypeId.ROADMAP
  }
  var map = new qq.maps.Map(document.getElementById("container"), myOptions);
}

2.1、继续之前的步骤

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网站</title>
    <!-- 加入这句 -->
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

3、页面使用

<!-- 获取经纬度 -->
        <el-dialog v-model="dialogMap" title="获取经纬度" width="600px" :close-on-click-modal="false" draggable>
            <div class="p16">
                <div class="task-one">
                    <div class="task-one__item">
                        <span class="task-one__label">地址：</span>
                        <el-input placeholder="输入地址获取经纬度" v-model.trim="addrs" clearable></el-input>
                    </div>
                    <div class="task-one__btn clearfix">
                        <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">
                            搜索
                        </el-button>
                    </div>
                </div>
                <!-- 地图容器 -->
                <div id="container"></div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="confirmMap">确认地址</el-button>
                    <el-button @click="dialogMap = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

4、js，这里涉及到一个知识点，就是我们要请求腾讯地图的地理接口，但如果直接用axios的话我们会涉及到跨域问题，此时我们要借助vue-jsonp把接口变为jsonp请求

npm i vue-jsonp -S

<script setup>
import { jsonp } from 'vue-jsonp' // npm i vue-jsonp -S

    var map = null
    const addrs = ref('')
    const locations = ref('')

    // 搜索
    const handleSearch = () => {
        if (addrs.value == '') {
            proxy.$util.messages('请输入详细地址！', 'warning')
            return
        }
        search_btn.value = true
        jsonp('https://apis.map.qq.com/ws/geocoder/v1/?address=', {
            output: 'jsonp',
            address: addrs.value,
            key: '你的key'
        }).then(res => {
            search_btn.value = false
            if (res.status == 0) {
                // 通过地址得到经纬度
                locations.value = `${res.result.location.lat},${res.result.location.lng}`
                let center = new qq.maps.LatLng(res.result.location.lat, res.result.location.lng)
                map.panTo(center)  // 重新设置地图中心点
                initMap(res.result.location.lat, res.result.location.lng)
            } else {
            proxy.$util.messages(res.message)
            }
        }).catch(err => {
            search_btn.value = false
            console.log('地图错误：', err);
        })
    }

    // 初始化地图及设置标记
    function initMap(lat = 39.90923, lng = 116.397428) {
        var myLatlng = new qq.maps.LatLng(lat, lng)
        var myOptions = {
            zoom: 17,
            center: myLatlng,
            mapTypeId: qq.maps.MapTypeId.ROADMAP
        }
        map = new qq.maps.Map(document.getElementById("container"), myOptions);
        var marker = new qq.maps.Marker({ // 设置标记
            position: myLatlng,
            draggable: true,
            animation: qq.maps.MarkerAnimation.DROP,
            map: map
        })
        qq.maps.event.addListener(marker, 'dragend', function (e) { // 监听标记拖动
            var latLng = marker.getPosition();
            map.setCenter(latLng);
            let lats = latLng.lat.toFixed(6)
            let lng = latLng.lng.toFixed(6)
            locations.value = `${lats},${lng}`
        });
    }
</script>

5、输入地址搜索后的效果

创作不易，喜欢就点个赞，有问题在下方留言，共同进步

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^