百度地图自定义标注标记

一、引入：  

二、将一个div放在form里面作为地图的容器

 
                           

 
                     

三、

// 百度地图API功能
        var map = new BMap.Map("allmap");
        if (startLon != 0) {//可以自定义初始化
            map.centerAndZoom(new BMap.Point(startLon, startLat), 9);
        } else {
            map.centerAndZoom(new BMap.Point(125.312, 43.801), 9);
        }
        map.enableScrollWheelZoom();                            //启用滚轮放大缩小

自定义标注

lon=125.312;

lat= 43.801;

var point = new BMap.Point(lon, lat);

  var icons = "../images/red.png";//图片相对路径

 var icon = new BMap.Icon(icons, new BMap.Size(30, 57), { anchor: new BMap.Size(14, 50), infoWindowAnchor: new BMap.Size(14, 0) }); //显示图标大小和位置，信息窗口的位置//如果不加信息窗口就把 infoWindowAnchor（, infoWindowAnchor: new BMap.Size(14, 0)）这项去掉
            var newPointMark = new BMap.Marker(point, { icon: icon }); //lng为经度,lat为纬度
            var infoWindow1 = new BMap.InfoWindow(msg);//msg-消息内容
            newPointMark.addEventListener("click", function () { this.openInfoWindow(infoWindow1); });
            map.addOverlay(newPointMark); //将标签添加到地图中去

//添加文本标注

var opts = {
                    position: point,    // 指定文本标注所在的地理位置
                    offset: new BMap.Size(30, -30)    //设置文本偏移量
                };
                var label = new BMap.Label(msg, opts); // 创建文本标注对象--标注监控点的名字，msg为显示的内容
                label.setStyle({
                    color: "blue", //蓝
                    fontSize: "12px",
                    height: "20px",
                    lineHeight: "20px",
                    fontFamily: "微软雅黑"
                });
  map.addOverlay(label);

//添加折线轨迹

  var polyline = new BMap.Polyline([
                            point, point2
                        ],
                        { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5 });
    map.addOverlay(polyline);