Implementierungsmethode: 1. Beantragen Sie einen geheimen Schlüssel in „Baidu Map Development Platform“. 2. Verwenden Sie Skript-Tags in „index.html“, um Kartenlinks einzuführen. 3. Fügen Sie relevanten JS-Code zur Implementierung ein Baidu-Karte.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.
vue verwendet Baidu Maps im Projekt
Der erste Schritt besteht darin, zur Baidu Map Development Platform http://lbsyun.baidu.com/ zu gehen, um einen geheimen Schlüssel zu beantragen.
Der zweite Schritt wird wie folgt in das Projekt eingeführt:
Wobei index.html den Kartenlink speichert, lautet der Code wie folgt:
Dann wird es in APP.vue implementiert, der Code lautet wie folgt folgt
<template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> </div> </template> <script> export default { name: 'App', methods:{ map(){ let map =new BMap.Map(this.$refs.allmap); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);// 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.MapTypeControl({//添加地图类型控件 mapTypes:[ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]})); map.setCurrentCity("北京");// 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 } }, mounted(){ this.map() } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } #allmap{ height: 500px; overflow: hidden; } </style>
Verwandte Empfehlungen: „ vue.js Tutorial》
Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Baidu-Kartenanzeige im VueJS-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!