易记棋牌,复贵袭人,找不到回去的路
百度地图插件
安装
cdn全局安装
<script src="https://unpkg.com/vue-baidu-map"></script>
插件的引入
vue.use(vuebaidumap.default, { ak: 'your_app_key', })
ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apico...
地图视图
bmview 是用于渲染百度地图实例可视化区域的容器
使用 bmview 渲染一个地图实例:
<template id="baidu"> <baidu-map class="map"> <bm-view style="position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px"></bm-view> </baidu-map> </template>
给地图添加一个缩放控件
<bm-navigation anchor="bmap_anchor_top_right"></bm-navigation>
把控件放到我们渲染的地图实例里就可以了
效果如下:
完整代码如下:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>baidumap</title> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue-baidu-map"></script> <style> #map{ width: 1000px; height: 500px; } </style> </head> <body> <div id="map"> <baidu></baidu> </div> <template id="baidu"> <baidu-map class="map"> <bm-navigation anchor="bmap_anchor_top_right"></bm-navigation> <bm-view style="position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px"></bm-view> </baidu-map> </template> <script> vue.use(vuebaidumap.default, { ak: 'your_app_key', }) vue.component("baidu",{ template:'#baidu' }) new vue({ el:'#map' }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论