Detailed Vue uses Baidu Maps in the project

The first step, go to Baidu map developer to apply for a secret key.

The second step is introduced in the project, as shown in

详解vue在项目中使用百度地图

, INDEX.html stores a map link, the code is as follows

详解vue在项目中使用百度地图

Then in app.Vue, the code is as follows

   
Export Default {name: 'app', methods: {map () {let map = new bmap.map (this. $ Refs.allmap); // Create a map instance map.centerandzoom (New BMap.point (116.404, 39.915), 11); // Initialize map, set central point coordinates and map level map.addControl (new bmap.maPTypeControl ({// Add Map Type Control MAPTYPES: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]})))) Map.SetCurrentCITY ("Beijing"); // Setting this city This item is Map.EnablescrollWheelzoom (TRUE) that must be set; // Open the mouse roller scale}}}}}}}}}} #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;}
The above is a small-knitted Vue introduced to everyone in the project to explain the integration of Baidu maps, I hope to help everyone. If you have any questions, please leave a message, the small package will reply to everyone. . Thank you very much for your support of Tumi Cloud Website!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment