百度地图｜ 8月更文挑战

个性化地图

• 通过样式ID调用个性化地图样式（官方推荐）
• 通过样式JSON调用个性化地图样

绘制点、线、面

1. 添加标识

var myIcon = new BMapGL.Icon("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fd.paper.i4.cn%2Fmax%2F2018%2F03%2F02%2F14%2F1519970935051_082969.jpg&refer=http%3A%2F%2Fd.paper.i4.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628945359&t=81b6e12afcbbe2f136541099caa306d8", new BMapGL.Size(300, 200), {   
  anchor: new BMapGL.Size(100, 100),     
  imageOffset: new BMapGL.Size(20,220)   // 设置图片偏移   
});     
  // 创建标注对象并添加到地图  
var marker = new BMapGL.Marker(point, {icon: myIcon});   
map.addOverlay(marker); 

打开浏览器我们就可以看见猪小屁啦！！！

2. 折线Polyline

var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.910),
		new BMapGL.Point(116.405, 39.920),
        new BMapGL.Point(116.425, 39.900),
        new BMapGL.Point(115.475, 39.800)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

3. 面 Polygon

var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});

文本标注

• 所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
• 覆盖物主要分为：标注（点标注、折线、多边形、圆、文本标注）、信息窗口、图层。
• var content = "label";
• var label = new BMapGL.Label(content, { 创建文本标注 position: point, 设置标注的地理位置 offset: new BMapGL.Size(10, 20) 设置标注的偏移量 })
• map.addOverlay(label);

注意点如果css的属性名中包含连字符，需要将连字符去掉并将其后的字母进行大写处理

信息窗口

• 所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标
• var opts = { width: 200, 信息窗口宽度 height: 100, 信息窗口高度 title: "Hello" 信息窗口标题 }
• var infoWindow = new BMapGL.InfoWindow("World", opts); 创建信息窗口对象
• map.openInfoWindow(infoWindow, map.getCenter());