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

先看效果，经纬度没有显示出来，要显示经纬度多增加一个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、继续之前的步骤

3、页面使用

        
            

                

                    

                        地址：
                        
                    
                    

                        
                            搜索
                        
                    
                
                
                

            
            
        

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

npm i vue-jsonp -S

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

 

更多api及事件请点添加标记 | 腾讯位置服务腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案；有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。https://lbs.qq.com/webDemoCenter/javascriptV2/marker/showMarker

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