百度地图自定义标注标记

一、引入： <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SeE5XplLIAdyPO1EBvFZGUBh"></script>

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

<style type="text/css">

form, html, #allmap

{

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

}

</style>

<form id="Form1" runat="Server">

<div id="allmap"></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);