vue3引入腾讯地图查询拖拽案例

vue3引入腾讯地图查询拖拽案例

$非常简单的小栗子$

未拖拽

拖拽后

html

<el-row>
  <el-col>
    <el-form-item label="地点查询">
      <div class="flex">
        <el-input  v-model="addFormField.address" placeholder="请输入地点"></el-input>
        <el-button type="primary" @click="searchMap">查询</el-button>
      </div>
    </el-form-item>
  </el-col>
</el-row>
<el-row>
  <el-col>
    <el-form-item label="考勤地图">
      <div class="map-box">
        <b>{
   
   { attendance_address }}</b>
        <div id="container"></div>
        <img src="http://imgca1.linkunst.com/330109011/20230520/93931source6468342197a24.png" alt="" />
      </div>
    </el-form-item>
  </el-col>
</el-row>

js内容

const state = reactive({
    
    
  map: null,
  lng: '116.397492',
  lat: '39.909144',
  mapKey: '****-EQVEP-6P5D4-LZRUB-HMES2-6TBQL',
  attendance_address: '',
});
//页面加载
onMounted(async () => {
    
    
  initMap();
  //我这里因为是http没办法使用如果是https符合谷歌浏览器同源策略即可获取用户当前经纬度;
  //代码我贴出来 希望你们能用到 不用的需要注释掉
  if (navigator.geolocation) {
    
    
   navigator.geolocation.getCurrentPosition(
     position => {
    
    
       const {
    
     latitude, longitude } = position.coords;
       state.lng = longitude;
       state.lat = latitude;
     },
     error => {
    
    
       console.log(error);
       Message.error('获取位置失败');
     }
   );
 } else {
    
    
   Message.error('浏览器不支持Geolocation API');
 }
});
//查询地图
function searchMap() {
    
    
  state.map.destroy(); //卸载不然会出现多个地图
  initMap(); //实例化
}
//实例化地图
function initMap() {
    
    
  var center = new TMap.LatLng(state.lat, state.lng); //自己写的经纬度
  state.map = new TMap.Map(document.getElementById('container'), {
    
    
    center: center,
    zoom: 13,
    draggable: true,
    scrollable: true,
    doubleClickZoom: true,
    showControl: false,
  });
  //拖拽地图
  state.map.addListener('dragend', handleMapDragEnd);
  //jsonp获取详细信息
  const url = `https://apis.map.qq.com/ws/geocoder/v1/?address=${
      
      state.addFormField.address}&key=${
      
      state.mapKey}&output=jsonp`;
  const callbackName = `jsonpCallback_${
      
      Date.now()}`;
  window[callbackName] = data => {
    
    
    if (data.status === 310 || data.status === 347) {
    
    
      Message.info('获取位置失败,请输入详细地址信息');
      return;
    }
    state.lng = data.result.location.lng;
    state.lat = data.result.location.lat;
    let center = new TMap.LatLng(data.result.location.lat, data.result.location.lng);
    state.map.panTo(center);
    //逆解析地址
    getAddress(data.result.location.lat, data.result.location.lng);
  };
  const script = document.createElement('script');
  script.src = `${
      
      url}&callback=${
      
      callbackName}`;
  document.body.appendChild(script);
}
//拖拽函数
function handleMapDragEnd() {
    
    
  var center = state.map.getCenter();
  var lng = center.lng.toFixed(3);
  var lat = center.lat.toFixed(3);
  state.lat = lat;
  state.lng = lng;
  getAddress(lat, lng);
}
//逆解析函数
function getAddress(lat, lng) {
    
    
  const location = `${
      
      lat},${
      
      lng}`;
  const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${
      
      location}&key=${
      
      state.mapKey}&output=jsonp`;
  const callbackName = `jsonpCallback_${
      
      Date.now()}`;
  window[callbackName] = data => {
    
    
    if (data.status === 310 || data.status === 347) {
    
    
      Message.info('获取位置失败,请输入详细地址信息');
      return;
    }
    state.addFormField.attendance_address = data.result.formatted_addresses.recommend;
  };
  const script = document.createElement('script');
  script.src = `${
      
      url}&callback=${
      
      callbackName}`;
  document.body.appendChild(script);
}