1. [Call Display]

In lbs.qq.com/guides/star… Request a key

/ / in the vue index. The first introduced tencent map pack inside the HTML < script charset = "utf-8" SRC = "https://map.qq.com/api/js?v=2.exp&key=yourkey" > < / script > / /. Vue  <template> <div> <div id="container" style="width:600px; height:500px;" ></div> </div> </template> <script> export default{ mounted() { this.init(); }, methods:{init() { Var myLatlng = new qq.maps.latLNG (39.916527,116.397128); // Define factory mode function var myOptions = {zoom: 8, // set map zoom level center: myLatlng, // set center point style mapTypeId: Qq. Maps. MapTypeId. ROADMAP/style/set map details see MapType} / / get the dom elements add var map = new map information qq.maps.Map(document.getElementById("container"), myOptions); } } } </script>Copy the code

rendering

2. [Add click event to map]

Add a click event qq. Maps. The event. The addListener (map, ‘click’, function (event) {alert (” you click on the map “); });

Click the event to get the longitude this.longitude = event.latng.getlat ();

Click on events to get latitude this.latitude = event.latLNg.getlng ();

Complete the case

/ / in the vue index. The first introduced tencent map pack inside the HTML < script charset = "utf-8" SRC = "https://map.qq.com/api/js?v=2.exp&key=yourkey" > < / script > / /. Vue  <template> <div> <div id="container" style="width:600px; height:500px;" ></div> </div> </template> <script> export default{ name:'news', Data () {return {longitude:39.916527,// latitude:116.397128}}, methods:{init() {// steps: Map variables called qq. Maps. Maps () constructor for map shows container / / set the map center var myLatlng = new qq. Maps. The LatLng (enclosing longitude, enclosing latitude); // Define factory mode function var myOptions = {zoom: 8, // set map zoom level center: myLatlng, // set center point style mapTypeId: Qq. Maps. MapTypeId. ROADMAP/style/set map details see MapType} / / get the dom elements add var map = new map information qq.maps.Map(document.getElementById("container"), myOptions); / / add click event / / to map and obtain the mouse to click the latitude and longitude of qq. The maps. The event. The addListener (map, 'click', function(event) { this.longitude = event.latLng.getLat(); this.latitude = event.latLng.getLng(); Alert (" longitude: "+ this. Longitude +", "+" latitude: "+ enclosing latitude); }); } }, mounted() { this.init(); } } </script>Copy the code

rendering

The above content is reprinted from the front end to pit the article “Vue using Tencent map (a)”

Link: www.jianshu.com/p/130cdbd07…

Source: Jane Book

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