<p><code></p> <h1 id="articleHeader0">vue.js下引入百度地图jsApi的两种方法</h1> <h2 id="articleHeader1">前言</h2> <p>今天有个项目需要用到百度地图,一般我们在移动端使用百度地图,都是直接通过这样的方式,直接引入百度地图的jsApi。</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="<script type=&quot;text/javascript&quot; src=&quot;http://api.map.baidu.com/api?v=2.0&amp;ak=&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://api.map.baidu.com/api?v=2.0&amp;ak="</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>这种方法的原理,就是直接给全局widow对象添加一个B<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>对象,从而可以使我们在已经加载api的页面的任何地方,使用百度地图的api。但是单单通过引入的方法,对于使用单文件组件的vue+webpack开发的项目,显然是不够的。于是,通过网上查资料。这里找到了两种方法。</p> <h2 id="articleHeader2">直接引入script标签</h2> <p>第一种方法是通过直接引入的方法,当然除了引入script标签还不够,要想在vue文件中使用bmap对象,还需要在webpack的配置文件中,设置外部扩展(externals属性)</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="//webpack.dev.conf.js externals: { 'BaiduMap': 'BMap' }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-comment">//webpack.dev.conf.js</span> externals: { <span class="hljs-symbol">'BaiduMa</span>p': <span class="hljs-symbol">'BMa</span>p' }</code></pre> <p>externales属性来自官方的解释是:</p> <blockquote><p>防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。</p></blockquote> <p>webpack文档也给出了一个示例:从 CDN 引入 <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>,而不是把它打包。 <br />index.html</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="<script src=&quot;https://code.jquery.com/jquery-3.1.0.js&quot; integrity=&quot;sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=&quot; crossorigin=&quot;anonymous&quot;> </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://code.jquery.com/jquery-3.1.0.js"</span> <span class="hljs-attr">integrity</span>=<span class="hljs-string">"sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string">"anonymous"</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>webpack.config.js</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="externals: { jquery: 'jQuery' }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">externals</span>: { <span class="hljs-attribute">jquery</span>: <span class="hljs-string">'<a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a>'</span> }</code></pre> <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="import $ from 'jquery'; $('.my-element').animate(...);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> $ <span class="hljs-keyword">from</span> <span class="hljs-string">'jquery'</span>; $(<span class="hljs-string">'.my-element'</span>).animate(...);</code></pre> <p>参考这个实例,我们就可以在我们的项目中通过引入js文件的方法,直接使用百度地图的api。</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="import BaiduMap from 'BaiduMap' export default { name: 'Index', ....." title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Baidu<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'BaiduMap'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { name: <span class="hljs-string">'Index'</span>, .....</code></pre> <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="mounted() { var map = new BaiduMap.Map('allmap') // 创建地图实例 var point = new BaiduMap.Point(120.343373,31.540212) // 创建中心点坐标 var marker = new BaiduMap.Marker(point) // 创建标注 map.centerAndZoom(point,15) // 初始化地图,设置中心点坐标和地图级别 map.addOverlay(marker) // 将标注添加到地图中 }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs go"><code>mounted() { <span class="hljs-keyword">var</span> <span class="hljs-keyword">map</span> = <span class="hljs-built_in">new</span> BaiduMap.Map(<span class="hljs-string">'allmap'</span>) <span class="hljs-comment">// 创建地图实例</span> <span class="hljs-keyword">var</span> point = <span class="hljs-built_in">new</span> BaiduMap.Point(<span class="hljs-number">120.343373</span>,<span class="hljs-number">31.540212</span>) <span class="hljs-comment">// 创建中心点坐标</span> <span class="hljs-keyword">var</span> marker = <span class="hljs-built_in">new</span> BaiduMap.Marker(point) <span class="hljs-comment">// 创建标注</span> <span class="hljs-keyword">map</span>.centerAndZoom(point,<span class="hljs-number">15</span>) <span class="hljs-comment">// 初始化地图,设置中心点坐标和地图级别</span> <span class="hljs-keyword">map</span>.addOverlay(marker) <span class="hljs-comment">// 将标注添加到地图中</span> }</code></pre> <p>注意这里,实例化地图api,最好要在mounted阶段进行,如果你的dom中采用的是官方的示例如</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=" <div id=&quot;allmap&quot;></div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><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">"allmap"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p>因为只有在mounted的阶段,dom才会生成并挂载。</p> <h2 id="articleHeader3">通过模块化引入的方法</h2> <p>实际上百度地图官方去年已经开源了基于jsApi的vue和react的对应开源组件,我们可以直接通过npm安装,然后使用。 <br />VUE:[<a href="https://github.com/Dafrok/vue-baidu-map" rel="nofollow noreferrer" target="_blank">https://github.com/Dafrok/vue...</a>] <br /><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>:[<a href="https://github.com/huiyan-fe/react-bmap" rel="nofollow noreferrer" target="_blank">https://github.com/huiyan-fe/...</a>] <br />可参考它们在github上面的文档进行使用。这里只介绍下vue的。<br />安装</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="npm i vue-baidu-map --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm i vue-baidu-map <span class="hljs-comment">--save</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="import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'YOUR_APP_KEY' //这个地方是官方提供的ak密钥 })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> BaiduMap <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-baidu-map'</span> Vue.use(BaiduMap, { ak: <span class="hljs-string">'YOUR_APP_KEY'</span> <span class="hljs-comment">//这个地方是官方提供的ak密钥</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="<template><br /> <baidu-map class=&quot;map&quot;><br /> </baidu-map><br /> </template></p> <style> /* The container of Baidu<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a> must be set width &amp; height. */ .map { width: 100%; height: 300px; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</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">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">style</span>&gt;</span><span class="css"> <span class="hljs-comment">/* The container of BaiduMap must be set width &amp; height. */</span> <span class="hljs-selector-class">.map</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26034.html