<p><code></p> <h1 id="articleHeader0">百度地图插件</h1> <h1 id="articleHeader1">安装</h1> <h2 id="articleHeader2">CDN全局安装</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;https://unpkg.com/vue-baidu-map&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue-baidu-map"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h2 id="articleHeader3">插件的引入</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Vue.use(VueBaiduMap.default, { ak: 'YOUR_APP_KEY', })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.use(VueBaidu<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a>.default, { <span class="hljs-attr">ak</span>: <span class="hljs-string">'YOUR_APP_KEY'</span>, })</code></pre> <p>ak 是在百度地图开发者平台申请的密钥 详见 <a href="http://lbsyun.baidu.com/apiconsole/key" rel="nofollow noreferrer" target="_blank">http://lbsyun.baidu.com/apico...</a> */</p> <h2 id="articleHeader4">地图视图</h2> <p>BmView 是用于渲染百度地图实例可视化区域的容器</p> <p>使用 Bmview 渲染一个地图实例:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template id=&quot;baidu&quot;><br /> <baidu-map class=&quot;map&quot;><br /> <bm-view style=&quot;position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px&quot;></bm-view><br /> </baidu-map><br /> </template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"baidu"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">baidu-map</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"map"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">bm-view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">bm-view</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">baidu-map</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></code></pre> <p>给地图添加一个缩放控件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<bm-navigation anchor=&quot;BMAP_ANCHOR_TOP_RIGHT&quot;></bm-navigation>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">bm-navigation</span> <span class="hljs-attr">anchor</span>=<span class="hljs-string">"BMAP_ANCHOR_TOP_RIGHT"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">bm-navigation</span>&gt;</span></code></pre> <p>把控件放到我们渲染的地图实例里就可以了</p> <p>效果如下:</p> <p><span class="img-wrap"><img data-src="/img/bVUrQG?w=1124&amp;h=615" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="![image](img/baidumap.gif)" title="![image](img/baidumap.gif)" style="cursor: pointer;"></span></p> <p>完整代码如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;><br /> <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;><br /> <title>baidumap</title><br /> <script src=&quot;https://unpkg.com/vue&quot;></script><br /> <script src=&quot;https://unpkg.com/vue-baidu-map&quot;></script></p> <style> #map{ width: 1000px; height: 500px; } </style> <p></head><br /> <body></p> <div id=&quot;map&quot;> <baidu></baidu> </div> <p> <template id=&quot;baidu&quot;></p> <p> <baidu-map class=&quot;map&quot;><br /> <bm-navigation anchor=&quot;BMAP_ANCHOR_TOP_RIGHT&quot;></bm-navigation><br /> <bm-view style=&quot;position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px&quot;></bm-view><br /> </baidu-map></p> <p> </template><br /> <script> <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.use(<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>Baidu<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>.default, { ak: 'YOUR_APP_KEY', }) Vue.component(&quot;baidu&quot;,{ template:'#baidu' }) new Vue({ el:'#map' }) </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>baidumap<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue-baidu-map"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-id">#map</span>{ <span class="hljs-attribute">width</span>: <span class="hljs-number">1000px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"map"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">baidu</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">baidu</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"baidu"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">baidu-map</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"map"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">bm-navigation</span> <span class="hljs-attr">anchor</span>=<span class="hljs-string">"BMAP_ANCHOR_TOP_RIGHT"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">bm-navigation</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">bm-view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">bm-view</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">baidu-map</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> Vue.use(VueBaiduMap.default, { ak: <span class="hljs-string">'YOUR_APP_KEY'</span>, }) Vue.component(<span class="hljs-string">"baidu"</span>,{ template:<span class="hljs-string">'#baidu'</span> }) <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">'#map'</span> }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p></code></p>

本文固定链接:

Vue的百度地图插件尝试

http://www.js-code.com/vue-js/vue-js_26130.html

80%的人都看过