<p><code></p> <p>百度地图怎么使用就不说了,主要讲讲这个heatmap,直接贴代码了,注释挺详细的</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=" //vue组件中 data(){ return{ heatmapOverlay:&quot;&quot; } }, mounted() { //引用heatmap.js //你也可以在index.html中直接插个 <script type=&quot;text/javascript&quot; src=&quot;http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js&quot;></script></p> <p> let script = document.createElement(&quot;script&quot;);<br /> script.type = &quot;text/javascript&quot;;<br /> script.src =<br /> &quot;http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js&quot;;<br /> document.body.appendChild(script); </p> <p> //创建地图,这个写自己的创建地图方法,请确认你的地图能加载出来<br /> this.creatMap();</p> <p> //一定要先让地图加载出来才加载热力图,我这里做演示直接写个setTimeout了<br /> setTimeout(()=>{this.getHeatmap()},2000)<br /> },<br /> methods:{<br /> getHeatmap() {<br /> //请求雷达数据,雷达数据需要lng,lat,count 三种数据<br /> this.$http<br /> .get(&quot;../../../static/radar20.json&quot;)<br /> .then(res => {<br /> if (res.data.code == &quot;success&quot;) {<br /> console.log(&quot;获取radar成功&quot;);<br /> var bigdata = res.data.data;</p> <p> //关键是下面的三行<br /> //其中map是new BMap.Map()创建的地图实例,其他的热力图属性(radius,opacity这种)可以在百度地图接口实例中调试体验,http://lbsyun.baidu.com/jsdemo.htm#c1_15<br /> this.heatmapOverlay = new BMapLib.HeatmapOverlay({ radius: 40,opacity:0.4});<br /> map.addOverlay(this.heatmapOverlay);<br /> this.heatmapOverlay.setDataSet({ data: bigdata, max: 20 });</p> <p> } else {<br /> console.log(&quot;err&quot;);<br /> }<br /> })<br /> .catch(err => {<br /> console.log(err);<br /> });<br /> },<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code> <span class="hljs-comment">//vue组件中</span> <span class="hljs-keyword">data</span>(){ <span class="hljs-keyword">return</span>{ heatmapOverlay:<span class="hljs-string">""</span> } }, mounted() { <span class="hljs-comment">//引用heatmap.js</span> <span class="hljs-comment">//你也可以在index.html中直接插个 &lt;script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"&gt;&lt;/script&gt;</span> <a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a> script = document.createElement(<span class="hljs-string">"script"</span>); script.type = <span class="hljs-string">"text/javascript"</span>; script.src = <span class="hljs-string">"http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"</span>; document.body.appendChild(script); <span class="hljs-comment">//创建地图,这个写自己的创建地图方法,请确认你的地图能加载出来</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.creat<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a>(); <span class="hljs-comment">//一定要先让地图加载出来才加载热力图,我这里做演示直接写个setTimeout了</span> setTimeout(()=&gt;{<span class="hljs-keyword">this</span>.getHeatmap()},<span class="hljs-number">2000</span>) }, methods:{ getHeatmap() { <span class="hljs-comment">//请求雷达数据,雷达数据需要lng,lat,count 三种数据</span> <span class="hljs-keyword">this</span>.$http .<span class="hljs-keyword">get</span>(<span class="hljs-string">"../../../static/radar20.json"</span>) .then(res =&gt; { <span class="hljs-keyword">if</span> (res.<span class="hljs-keyword">data</span>.code == <span class="hljs-string">"success"</span>) { console.log(<span class="hljs-string">"获取radar成功"</span>); <span class="hljs-keyword">var</span> bigdata = res.<span class="hljs-keyword">data</span>.<span class="hljs-keyword">data</span>; <span class="hljs-comment">//关键是下面的三行</span> <span class="hljs-comment">//其中map是new BMap.Map()创建的地图实例,其他的热力图属性(radius,opacity这种)可以在百度地图接口实例中调试体验,http://lbsyun.baidu.com/jsdemo.htm#c1_15</span> <span class="hljs-keyword">this</span>.heatmapOverlay = new BMapLib.HeatmapOverlay({ radius: <span class="hljs-number">40</span>,opacity:<span class="hljs-number">0.4</span>}); map.addOverlay(<span class="hljs-keyword">this</span>.heatmapOverlay); <span class="hljs-keyword">this</span>.heatmapOverlay.setDataSet({ <span class="hljs-keyword">data</span>: bigdata, max: <span class="hljs-number">20</span> }); } <span class="hljs-keyword">else</span> { console.log(<span class="hljs-string">"err"</span>); } }) .<span class="hljs-keyword">catch</span>(err =&gt; { console.log(err); }); }, }</code></pre> <p>效果图:</p> <p><span class="img-wrap"><img data-src="/img/bVbgsHT?w=603&amp;h=479" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p></code></p>

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