金牛外婆 發表於 2019-8-6 19:54:00

Angular 调用百度地图API接口

<h1>Angular 调用百度地图API接口</h1>
<p>&nbsp;参考原文：https://blog.csdn.net/yuyinghua0302/article/details/80624274</p>
<p>&nbsp;下面简单介绍一下如何在Angular中使用百度地图。</p>
<h2>&nbsp;第一步：申请百度地图密钥。</h2>
<p>http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey</p>
<p>&nbsp;<img src="https://img2018.cnblogs.com/blog/1334178/201908/1334178-20190806194539224-1471094156.png" alt="" width="722" height="354"></p>
<h2>第二步：在Angular项目中引入百度地图API文件，在index.html中引入。</h2>
<div class="cnblogs_code">
<pre>&lt;script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=您的密钥"&gt;&lt;/script&gt;</pre>
</div>
<p>另外，如果需要去除百度地图左下角的logo，仅需要在styles.scss中添加如下代码就可以了。（但是我个小菜鸡没有去成功）。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">.anchorBL</span>{<span style="color: rgba(255, 0, 0, 1)">
display</span>:<span style="color: rgba(0, 0, 255, 1)">none</span>;
}</pre>
</div>
<h2>第三步：新建一个组件，在他的HTML文件中：</h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">id </span><span style="color: rgba(0, 0, 255, 1)">= "map"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width:100%;height: 100px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<p>&nbsp;　　<span style="color: rgba(255, 102, 0, 1)">注意：我在Angular中按照官网引入百度地图js，不提示错误，地图就是显示出来。折腾了半天，最后发现原来是<strong>没有设置地图显示的宽和高</strong>。。。</span></p>
<p>&nbsp;在component.ts文件中：</p>
<div class="cnblogs_code">
<pre>import { Component, OnInit } from '@angular/core'<span style="color: rgba(0, 0, 0, 1)">;
declare </span><span style="color: rgba(0, 0, 255, 1)">var</span><span style="color: rgba(0, 0, 0, 1)"> BMap: any;
@Component({
selector: </span>'app-demo'<span style="color: rgba(0, 0, 0, 1)">,
templateUrl: </span>'./demo.component.html'<span style="color: rgba(0, 0, 0, 1)">,
styleUrls: [</span>'./demo.component.scss'<span style="color: rgba(0, 0, 0, 1)">]
})
export class DemoComponent implements OnInit {
constructor() {}
ngOnInit() {
    const map </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> BMap.Map('map');<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">创建地图实例</span>
    const point = <span style="color: rgba(0, 0, 255, 1)">new</span> BMap.Point(116.404, 39.915);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">创建点坐标</span>
    map.centerAndZoom(point, 15);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">初始化地图，设置中心点坐标和地图级别</span>
    map.enableScrollWheelZoom(<span style="color: rgba(0, 0, 255, 1)">true</span>);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">开启鼠标滚轮缩放</span>
<span style="color: rgba(0, 0, 0, 1)">}
}</span></pre>
</div>
<h2>&nbsp;第四步：运行项目，就可以看到所引入的地图啦！</h2>
<p><img src="https://img2018.cnblogs.com/blog/1334178/201908/1334178-20190806195045692-1280026708.png" alt="" width="577" height="247"></p>
<p>&nbsp;</p>
<p>百度地图 javascript&nbsp;api&nbsp;案例地址：http://lbsyun.baidu.com/jsdemo.htm#canvaslayer&nbsp;</p>
<p>&nbsp;<img src="https://img2018.cnblogs.com/blog/1334178/201908/1334178-20190806195258754-1686831932.png" alt="" width="734" height="360"></p>
<p>在ts文件中写的语法和javascript&nbsp;api&nbsp;基本一样，看懂上边的例子就会用。</p>
<p>&nbsp;</p>

</div>
<div id="MySignature" role="contentinfo">
    【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！<br>
【重要说明】本博文为个人学习记录，观点仅为个人见解，不代表技术领域的最终结论。撰写目的主要在于自我总结与经验分享，欢迎批评指正，本人将虚心改进。内容仅供参考，非专业建议，请理性判断。<br>
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014<br>
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/<br>
【Gitee地址】叫我+V ：https://gitee.com/wjw1014<br><br><br>
来源：https://www.cnblogs.com/wjw1014/p/11311429.html
頁: [1]
查看完整版本: Angular 调用百度地图API接口