element-ui + Tencent map

Posted May 27, 20203 min read

Because the project needs to use maps on the applet, and Baidu coordinates still need to be converted, I decided to introduce Tencent maps.

precondition

Apply for Tencent map key Tencent location service

npm install qqmap --save

Import required js files,

Type in App.vue

<script type = "text/javascript" src = "http://map.qq.com/api/js?v=2.exp&key=key of application"> </script>
<script type = "text/javascript" src = "https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"> </script>

New TMap.js file

import maps from 'qqmap';

export function TMap() {
    return new Promise(resolve => {
        maps.init(application key,() => {
            resolve(maps);
        });
    });
}

New map.vue file

<template>
  <div id = "container"> </div>
</template>
<script>

/* eslint-disable * /
import {TMap} from "./TMap";

export default {
  name:"mapChild",
  data() {
    return {};
  },
  created() {
    let _this = this;
    TMap(). Then(qq => {
      //Initialize the center point, pass in the value you want to set
      this.mapInit(longitude, latitude, zoom ratio);
    });
  },
  methods:{
    //The parent component calls this function to set the location
    setLoc(lng, lat) {
      this.mapInit(lng, lat, 16);
    },
    //Search for a place name
    getLoc(ele) {
      this. $axios({
        url:url,
        //If you directly use Tencent's search API, you will report a cross-domain error
        //I use the node server as a proxy to request data
        //So the actual ip address will not be released here
        //At the end I will also add the code of the node part
        method:"get",
        params:{
          address:ele
        }
      })
        .then(res => {
          let searchObj = res.data.data;
          searchObj.search = 1;
          this. $emit("mapSend", searchObj);
          let _this = this;
          let resultData = res.data.data.data [0];
          if(res.data.data.status == 0) {
            this.mapInit(resultData.location.lng, resultData.location.lat, 16);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //Render the map according to the incoming value and send out the latitude, longitude and place name
    mapInit(lng, lat, zoom) {
      let _this = this
      var map = new qq.maps.Map(document.getElementById("container"), {
        //The center geographic coordinates of the map.
        center:new qq.maps.LatLng(
          lat,
          lng
       ),
        zoom:zoom
      });
      var marker = new qq.maps.Marker({
        position:new qq.maps.LatLng(
          lat,
          lng
       ),
        map:map
      });
      qq.maps.event.addListener(map, "click", function(event) {
        marker.setMap(null);
      });
      qq.maps.event.addListener(map, "click", function(event) {
        let result = {
          status:0,
          result:{
            location:{
              lng:event.latLng.getLng(),
              lat:event.latLng.getLat()
            }
          }
        };
        qq.maps.event.addListener(map, "click", function(event) {
          marker.setMap(null);
        });
        var marker = new qq.maps.Marker({
          position:event.latLng,
          map:map
        });

        _this
          . $axios({
            url:url,
            //The url here is the same problem as above
            method:"get",
            params:{
              location:event.latLng.getLat() + "," + event.latLng.getLng()
            }
          })
          .then(res => {
            res.data.data.extra = 1;
            _this. $emit("mapSend", res.data.data);
          })
          .catch(err => {
            this. $message({
              type:'warning',
              message:'Location analysis failed'
            })
          })
      });
    }
  },
};
</script>
<style>
#container {
  min-width:600px;
  min-height:400px;
}
</style>

The above has completed the creation of child components, and then can be introduced in the parent component

Let's see the effect

You're done!

Part of the node code

//Get location
router.get('/tmapA', async function(req, res, next) {
    let url = 'http://apis.map.qq.com/ws/place/v1/suggestion/?key=key&region=' + urlencode('Shaoxing', 'utf-8') + '& keyword =' + urlencode(req.query.address, 'utf-8')
    request({
        url:url,
        method:"GET",
        json:true,
    }, function(_err, _res, _resBody) {
        if(_resBody) {
            new Result(_resBody, 'Successful analysis'). success(res)
        } else {
            new Result(null, 'Parsing failed'). fail(res)
        }
    })
})

//Get latitude and longitude
router.get('/tmapL', async function(req, res, next) {
    let url = 'https://apis.map.qq.com/ws/geocoder/v1/?key= applied key & location =' + req.query.location
    request({
        url:url,
        method:"GET",
        json:true,
    }, function(_err, _res, _resBody) {
        if(_resBody) {
            new Result(_resBody, 'Successful analysis'). success(res)
        } else {
            new Result(null, 'Parsing failed'). fail(res)
        }
    })
})