编程知识 cdmana.com

Tencent location service + element UI realizes address search & marker marking function

Preface

Small program projects need to achieve input address search, resolve the corresponding latitude and longitude and mark on the map .

Preparation

1、 Apply for Tencent location service key

2、npm install qqmap --save

Lead-in required js file

stay App.vue Input in

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

newly build TMap.js file

import maps from 'qqmap';

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

newly build 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 => {
      // Initialization center point , Pass in the value you want to set 
      this.mapInit( longitude ,  latitude ,  Zoom ratio );
    });
  },
  methods: {
    // The parent component calls the function , Location 
    setLoc(lng, lat) {
      this.mapInit(lng, lat, 16);
    },
    // Search for a location name 
    getLoc(ele) {
      this.$axios({
        url: url, 
        // Use Tencent's search directly api Cross domain error will be reported 
        // I'm through node The server acts as a proxy to request data 
        // So we don't release the reality here ip The address, ha 
        // At the end of the day, I will node Part of the code also adds 
        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 and the outgoing longitude, latitude and place names according to the incoming values 
    mapInit(lng,lat,zoom) {
      let _this = this
      var map = new qq.maps.Map(document.getElementById("container"), {
        //  The central 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,
            // there url 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 resolution failed '
            })
          })
      });
    }
  },
};
</script>
<style>
#container {
  min-width: 600px;
  min-height: 400px;
}
</style>

This completes the creation of subcomponents , Then it can be introduced and used in the parent component

design sketch

node Part of the code

// Access location 
router.get('/tmapA', async function (req, res, next) {
    let url = 'http://apis.map.qq.com/ws/place/v1/suggestion/?key= Applied 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, ' Parsing succeeded ').success(res)
        }else{
            new Result(null, ' Parse failure ').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, ' Parsing succeeded ').success(res)
        }else{
            new Result(null, ' Parse failure ').fail(res)
        }
    })
})

author :yiyou12138

link :https://segmentfault.com/a/1190000022763174

source :SegmentFault

The copyright belongs to the author . Commercial reprint please contact the author for authorization , Non-commercial reprint please indicate the source .

Link to the original text : https://segmentfault.com/a/1190000022763174

版权声明
本文为[Tencent location service]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225124404997f.html

Scroll to Top