preface

The wechat mini program project needs to realize the input address search, resolve the corresponding latitude and longitude and dot the map.

preparation

1. Apply for Tencent location service Key

2, NPM install qqmap –save

Import the required JS files

Enter in app.vue

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

Create a new tmap.js file

import maps from 'qqmap';

export function TMap() {
    return new Promise(resolve => {
        maps.init(申请的key, () => {
            resolve(maps);
        });
    });
}
Copy the code

Create the 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, scale); }); }, methods: {setLoc(LNG, lat) {this.mapinit (LNG, lat, 16); GetLoc (ele) {this.$axios({url: // I am using the node server as a proxy to request data // so I will not release the actual IP address // at the end of the node part of the code also 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); }); }, 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, params: {location: {method: "get", params: {location: 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>Copy the code

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

rendering

Node code

Router. 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)}})})Copy the code
Router. 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)}})})Copy the code

Author: yiyou12138

Link: segmentfault.com/a/119000002…

Source: SegmentFault

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.