Angular call Baidu Maps API Interface

Angular call Baidu Maps API Interface

 Original Reference: https://blog.csdn.net/yuyinghua0302/article/details/80624274

 The following outlines how to use Baidu Maps Angular in.

 The first step: application Baidu map key.

http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

 

Step two: the introduction of Baidu Maps API files Angular project, introduced in the index.html.

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

In addition, if you need to remove the logo Baidu map the lower left corner, only you need to add the following code styles.scss on it. (But I did not go to a successful chicken dishes).

.anchorBL{
  display:none;
}

The third step: to create a new component in his HTML file:

<div id = "map" style="width:100%;height: 100px"></div>

 　　Note: I introduced Angular in accordance with the official website of Baidu map js, not an error, a map is displayed. Toss a half, and finally found the original is not set the width and height of the map display . . .

 In component.ts file:

{the Component Import, from the OnInit} '@ Angular / Core' ; 
DECLARE var the BMap: the any; 
@Component ({ 
  Selector: 'App-Demo' , 
  templateUrl: './demo.component.html' , 
  styleUrls: [ './ demo.component.scss' ] 
}) 
Export DemoComponent the implements the OnInit {class 
  constructor () {} 
  ngOnInit () { 
    const map = new new BMap.Map ( 'map'); // Create a map instance 
    const Point = new new BMap.Point ( 116.404, 39.915); // Creates a new point 
    map.centerAndZoom (point, 15); // initialize the map, set the level of the center coordinates and maps
    map.enableScrollWheelZoom ( to true ); // open the mouse wheel to zoom 
  } 
}

 Step Four: Run the project, you can see the map introduced it!

 

Baidu map javascript api Case Address: http://lbsyun.baidu.com/jsdemo.htm#canvaslayer 

 

Ts files written in javascript api is basically the same syntax and examples will be used to read the top.