vue仅使用腾讯地图根据城市名称获取经纬度

方式一: 下载插件
1.下载

npm install qqmap --save  

2.使用

// 2.1引入
import maps from 'qqmap'
export default {
	mounted () {
		// 方法调用
	    this.getLatitude('北京', '北京市', '通州区')
	},
	methods: {
		// 2.2 获取经纬度方法
	    getLatitude (province, city, countytown) {
	      const _t = this
	      const localName = province + ',' + city + ',' + countytown
	      // 初始化 maps
	      maps.init('你的key值', () => {})
	      const callbacks = {
	        complete: function (result) {
	          // 2.4 取到城市信息
	          const local = result.detail.location
	          _t.formInfo.teLongitude = local.lng // 经度
	          _t.formInfo.siteLatitude = local.lat // 纬度
	          console.log(result, 'result')
	        }
	      }
	      // eslint-disable-next-line no-undef
	      const geocoder = new qq.maps.Geocoder(callbacks)
	      // 调用方法
	      // 地址解析类用于在地址和经纬度之间进行转换的服务
	      geocoder.getLocation(localName)
	      
	      // 根据城市获取城市信息 (含经纬度)
	      // const cs= new qq.maps.CityService(callbacksSearch)
	      // cs.searchCityByName('北京市')
	    }
	}
}

方式二: iframe

1 index.html文件引入

   <script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=你的key值"></script>

2 组件内部

• template加上 iframe

<iframe
        width="100%"
        height="100%"
        frameborder="0"
        src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&mapdraggable=0&total=20&key=你的key值&referer=myapp"
      ></iframe>

• js里添加方法

// 同上添加方法 不需要初始化
// 获取经纬度
    getLatitude (province, city, countytown) {
      const _t = this
      const localName = province + ',' + city + ',' + countytown
      const callbacks = {
        complete: function (result) {
          const local = result.detail.location
          _t.formInfo.teLongitude = local.lng // 经度
          _t.formInfo.siteLatitude = local.lat // 纬度
          console.log(result, 'result')
        }
      }
      // eslint-disable-next-line no-undef
      const geocoder = new qq.maps.Geocoder(callbacks)
      geocoder.getLocation(localName)
    },

如果不需要显示地图还得给iframe加上样式不让它显示

腾讯api地址

https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsService#3