腾讯地图的使用

所实现的效果图如下

我是自己的city.json引入iview Cascader组件选择省市区。如需city.json请移步 到 https://blog.csdn.net/baidu_41899377/article/details/119909129
在需要的页面 引入 import city from './city.json'就可以使用。我用的是ivew的Cascader组件。

需将数据渲染到Cascader组件的处理如下：

<Cascader @on-change='addrHand' :data="provinceData" v-model="area" placeholder="省/市/区" />

mounted() {
			this.provinceData = city
		},

// 转化为级联所需的数组
			getChinaArea(selectedData, province, city, district) {
				let result = []
				selectedData.forEach(item => {
					if (item.label.toString() == province) {
						result.push(item.value)
					}
					if (item.children) {
						item.children.forEach(date => {
								if (date.label.toString() == city) {
									result.push(date.value)
								}
								if (date.children) {
									date.children.forEach(ele => {
										if (ele.label.toString() == district) {
											result.push(ele.value)
										}
									})
								}
							})
						}

				})
//做编辑赋值的时候

let selectedData = this.provinceData
this.getChinaArea(selectedData, province, city, district)

1.首先需给自己的项目申请key   找到https://lbs.qq.com/location/右上角控制台 应用管理创建自己的应用

重点：域名白名单不用填写内容。腾讯地图就不需要权限就都可以使用了 （如返回跨域报错就是这里的问题）

这时候完成了重要的第一步

2.这时候需要调用腾讯接口获取到你需要的地址的经纬度。。。需用到jsonp的请求格式。我用到的是vue写的后台。所以下载了插件npm install vue-jsonp --save  在main.js中引入 

import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp)

这时候就可以在页面直接使用了

//input失焦获取填写地址
			addrHand(value, selectedData) {
				let that = this
				// An highlighted block
				const KEY = '' //申请应用获取到的key
				const url = 'https://apis.map.qq.com/ws/geocoder/v1'
				const address = selectedData[selectedData.length - 1].__label.split('/').join(',') //自己所需要的地址  例如格式 湖北省武汉市江汉区
	
				this.$jsonp(url, {
					key: KEY,
					address: address,
					output: 'jsonp'
				}).then(res => {
					if (res.status == 0) {
						console.log(res)
						that.$nextTick(() => {
							console.log(res.result.location.lng, res.result.location.lat)
							// 2. 再调用子组件的方法使用该属性
							// 如果不使用 nextTick的话，子组件方法内获取到的有可能是这次赋值之前的值，下次调用时才能获取到此次赋值的值（应该是跟 Vue的异步事件队列有关系）
							that.$refs.myComponent.init(res.result.location.lng,res.result.location.lat); //这时候可获取到需要地址的经纬度传到map.vue中(我是父子组件方式使用。)
							
						})
					}
				})


			},

3.需要将经纬度传到地图上在地图上实时更新
map.vue
 

<template>
  <div>
    <div id="map" style="width:500px;height:400px;"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      longitude: '',
      latitude: ''
    };
  },
  created() {

  },

  methods: {
    init(lng,lat) {
      let address = "";
      let that = this;
	  if(lat&&lng){
		    var center = new qq.maps.LatLng(lat,lng );
	  }else{
		  let lng1=30.592655
		  let lat1=114.275077
		  var center = new qq.maps.LatLng(lat1,lng1);
	  }
    

      var map = new qq.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 13,
        disableDefaultUI: true
      });
      var marker = new qq.maps.Marker({
        position: center,
        map: map
      });
      var infoWin = new qq.maps.InfoWindow({
        map: map
      });
      var geocoder = new qq.maps.Geocoder({
        complete: function(res) {
		  that.$emit('address',res.detail)
          address = res.detail.nearPois[0].name;
        }
      });
      qq.maps.event.addListener(map, "click", function(event) {
		
        this.longitude = event.latLng.getLat();
        this.latitude = event.latLng.getLng();
        let lat = new qq.maps.LatLng(this.longitude, this.latitude);
        geocoder.getAddress(lat);
        setTimeout(() => {
		
          infoWin.open();
          infoWin.setContent(
            '<div style="text-align:center;white-space:nowrap;">' +
              address +
              "</div>"
          );
          infoWin.setPosition(event.latLng);
        }, 200);
		
			
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style scoped>
</style>

以上就实现了根据地址选择实时获取地图位置