preface

Small program project needs to achieve the input address search to resolve the corresponding latitude and longitude and dot on the map.

preparation

1. Apply for Tencent location service key

2, NPM install qqmap –save

Import the required JS file

Type in app.vue

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

Create a new tmap.js file

import maps from 'qqmap'; Export function tMap () {return new Promise(resolve) = map.init (key, () => {resolve(maps); }); }); }

Create a 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 =>) {this.mapInit(longitude, latitudes, scale); }); }, methods: {// setLoc(LNG, lat) {this.mapInit(LNG, lat, 16);}, methods: {// setLoc(LNG, lat); }, // search for a location name getLoc(ele) {this.$axios({url: // I'm using the Node server as a proxy to request data // I won't give the actual IP address // In the end I'll add 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 map with outgoing map (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 }); Method: "get", params: {location: $axios($this.$axios({url: url, //)) event.latLng.getLat() + "," + event.latLng.getLng() } }) .then(res => { res.data.data.extra = 1; _this.$emit("mapSend", res.data.data); }). The catch (err = > {enclosing $message ({type: "warning", the message: 'positioning resolution fail'})})}); }}}; </script> <style> #container { min-width: 600px; min-height: 400px; } </style>

This completes the creation of the child component, which can then be introduced and used in the parent component

rendering

Node Part Code

// get('/tmapA') async function (req, res) Next) {let url = 'http://apis.map.qq.com/ws/place/v1/suggestion/?key= application 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, 'analytical success). Success (res)} else {new Result (null,' resolution fail.) fail (res)}})})
// get('/tmapL') async function (req, res) Next) {let url = 'https://apis.map.qq.com/ws/geocoder/v1/?key= application key&location =' + the req. Query. The location request ({url: url, method: "GET", json: true, }, function(_err, _res, _resBody){ if(_resBody){ new Result(_resBody, 'analytical success). Success (res)} else {new Result (null,' resolution fail.) fail (res)}})})

Author: yiyou12138

Link: https://segmentfault.com/a/11…

Source: SegmentFault

The copyright belongs to the author. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please note the source.