腾讯地图通过地址获取经纬度

第一步先引入JS

如果是 vue 项目,在 index.html 文件中引入 js 文件。不是 vue 项目,直接在 html 页面中引入 js 文件。

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=your key"></script>

第二步封装方法并使用

如果不是 vue 项目:

<script>
	var geocoder = new qq.maps.Geocoder();
	function getLal (address) {
		//对指定地址进行解析
		geocoder.getLocation(address);
		//设置服务请求成功的回调函数
		geocoder.setComplete((res) => {
            console.log(address + '成功回调数据',res);
		});
		//若服务请求失败,则运行以下函数
		geocoder.setError((err) => {
			console.log(address + '地址输入错误',err)
		})
	}
	getLal('广东省佛山市')
	//getLal('广东省')
</script>

在这里插入图片描述
在这里插入图片描述
如果是 vue 项目:
1、新建一个 js 文件,封装一个方法

export const commonMethods = {
    //根据地址获取经纬度
    getLal: (address,cb) => {
      var geocoder = new qq.maps.Geocoder();
      geocoder.getLocation(address);
      geocoder.setComplete(function(res) {
          cb(res)
      });
      geocoder.setError(function(err) {
          cb(err)
      });
    }
}

在文件中引入方法

commonMethods.getLal('广东省佛山市',(res) => {
	console.log('res',res)
})

在这里插入图片描述

commonMethods.getLal('广东省',(res) => {
	console.log('res',res)
})

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐