一、引入: <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);