百度地图初开发

项目要求点

1：自定义地图样式

2：绘制曲线

3：绘制箭头

步骤如下

引入百度地图api

在代码中通过script标签引入百度地图的api

// https可以采用http请求访问，v=3.0代表api的版本，3.0和2.0的区别在一些方法的使用中区别很大，ak表示注册的信息，可在百度地图开发者文档中申请
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=*****" />
<div id="container" style={{ height: '100%' }} />

初始化

// 通过id新建一个图层
// enableScrollWheelZoom开启滚轮缩放
// centerAndZoom设置中心点以及地图的级别
var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point('118.454', '32.955'), 6);
    map.enableScrollWheelZoom(true);

自定义地图样式

// 3.0使用的是setMapStyleV2， 2.0使用的是setMapStyle
map.setMapStyleV2({     
      styleJson: mapStyle
    });

2.0自定义地图编辑器 developer.baidu.com/map/custom/ 3.0自定义地图编辑器 lbsyun.baidu.com/apiconsole/… ，其中3.0的国家边界线设置不了。

详细样式编辑器可自定义地图中的样式(大陆，水，道理等)，设置缩放样式可缩放地图的大小查看不同的地图级别，编辑JSON后，赋值，并赋值给mapStyle即可使用自定义地图。

绘制曲线

曲线官方实例： lbsyun.baidu.com/jsdemo.htm#…

// 通过point类传递经纬度定义每个点的坐标， CurveLine类设置points中连线的样式等
var beijingPosition=new BMap.Point(116.432045,39.910683),
		hangzhouPosition=new BMap.Point(120.129721,30.314429),
		taiwanPosition=new BMap.Point(121.491121,25.127053);
	var points = [beijingPosition,hangzhouPosition, taiwanPosition];

	var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
	map.addOverlay(curve); //添加到地图中
	curve.enableEditing(); //开启编辑功能

设置箭头

// 起始点和终止点位置的图片,url设置图片地址，new BMap.Size(20, 20)设置图片大小，new BMap.Marker创建地图中的覆盖物，然后addOverlay添加到地图中
      const Icon = new BMap.Icon(url, new BMap.Size(20, 20)); 
      Icon.setImageSize(new BMap.Size(20, 20));
      // 创建标注对象
      const startMarker = new BMap.Marker(startPosition, {icon: Icon, enableMassClear: false}); 
      const endMarker = new BMap.Marker(endPosition, {icon: Icon, enableMassClear: false});       
      map.addOverlay(startMarker);
      map.addOverlay(endMarker);