很简单
在index.html中加入百度地图api链接并填写你的密钥
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>XXX</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=OLV2W7QHEE9btblyddTkBQBWhjXw030h"></script> </head> <body> <app-root></app-root> </body> </html> |
来到我们自己的component
|
1 2 |
<div id = "map" style="width:100%;height: 400px"> </div> |
ts文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
declare var BMap: any; //为地图声明变量 @Component({ .... this.initmap(经度,纬度) .... initmap(lat,lon){ const map = new BMap.Map('map');//创建地图实例 const point = new BMap.Point(lon,lat);//创建点坐标 map.centerAndZoom(point, 15);//初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放 var marker = new BMap.Marker(point); map.addOverlay(marker); } |