<p><code></p> <p>A<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>.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="module.exports = function (k) { return new Promise(function (resolve, reject) { window.initTheMap = function () { resolve(AMap) } var script = document.createElement('script') script.type = 'text/javascript' script.async = true script.src = 'http://webapi.amap.com/maps?v=1.3&amp;callback=initTheMap&amp;key=' + k //script.onload = resolve script.onerror = reject document.head.appendChild(script) }) }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">k</span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in"><a href="http://www.js-code.com/tag/promise" title="浏览关于“Promise”的文章" target="_blank" class="tag_link">Promise</a></span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">resolve, reject</span>) </span>{ <span class="hljs-built_in">window</span>.initThe<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a> = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ resolve(AMap) } <span class="hljs-keyword">var</span> script = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'script'</span>) script.type = <span class="hljs-string">'text/javascript'</span> script.async = <span class="hljs-literal">true</span> script.src = <span class="hljs-string">'http://webapi.amap.com/maps?v=1.3&amp;callback=initTheMap&amp;key='</span> + k <span class="hljs-comment">//script.onload = resolve</span> script.onerror = reject <span class="hljs-built_in">document</span>.head.appendChild(script) }) }</code></pre> <hr> <p>A<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>.vue</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></p> <div></div> <p></template><br /> <script> var mapLoader = require('./AMap.js')</p> <p> module.exports = { replace: true, ready() { var self = this</p> <p> mapLoader('bfe31f4e0fb231d29e1d3ce951e2c780').then(AMap => { self.map = new AMap.Map(self.$el, { resizeEnable: true, zoom: 12, })</p> <p> self.map.on('click', function (e) { self.$dispatch('map-click', e)</p> <p> if (!self.marker) { self.marker = new AMap.Marker({ map: self.map }) }</p> <p> self.marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]) })</p> <p> self.$nextTick(function () { self.$dispatch('ready', self.map) }) }) } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code>&lt;template&gt; &lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>&gt;&lt;/div&gt; &lt;/template&gt; &lt;script&gt; <span class="hljs-keyword">var</span> mapLoader = <span class="hljs-keyword">require</span>(<span class="hljs-string">'./AMap.js'</span>) module.exports = { replace: <span class="hljs-keyword">true</span>, ready() { <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a> mapLoader(<span class="hljs-string">'bfe31f4e0fb231d29e1d3ce951e2c780'</span>).then(AMap =&gt; { <span class="hljs-keyword">self</span>.map = <span class="hljs-keyword">new</span> AMap.Map(<span class="hljs-keyword">self</span>.$el, { resizeEnable: <span class="hljs-keyword">true</span>, zoom: <span class="hljs-number">12</span>, }) <span class="hljs-keyword">self</span>.map.on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{ <span class="hljs-keyword">self</span>.$dispatch(<span class="hljs-string">'map-click'</span>, e) <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">self</span>.marker) { <span class="hljs-keyword">self</span>.marker = <span class="hljs-keyword">new</span> AMap.Marker({ map: <span class="hljs-keyword">self</span>.map }) } <span class="hljs-keyword">self</span>.marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]) }) <span class="hljs-keyword">self</span>.$nextTick(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">self</span>.$dispatch(<span class="hljs-string">'ready'</span>, <span class="hljs-keyword">self</span>.map) }) }) } } &lt;/script&gt;</code></pre> <hr> <p>app.vue</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 /> <gd-map @ready=&quot;ready&quot; :style='{ height:&quot;400px&quot; }'></gd-map><br /> </template></p> <p><script> module.<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a>s = { components: { gdMap: require('./AMap.vue') }, methods: { ready(map) { console.log('ready', map) } } } </script>" 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">gd-map</span> @<span class="hljs-attr">ready</span>=<span class="hljs-string">"ready"</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">'{ height:"400px" }'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">gd-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="javascript"> <span class="hljs-built_in">module</span>.exports = { <span class="hljs-attr">components</span>: { <span class="hljs-attr">gdMap</span>: <span class="hljs-built_in">require</span>(<span class="hljs-string">'./AMap.vue'</span>) }, <span class="hljs-attr">methods</span>: { ready(map) { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'ready'</span>, map) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p></code></p>

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