在网页中插入百度地图

版权声明：本文为博主原创文章，未经博主允许不得转载。
有时候需要在网页中插入百度地图，步骤如下：
效果如图所示：

css:

<style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }
        #map {
            width: 300px;
            height: 300px;
            border: #ccc solid 1px;
            margin: 0 auto; 
        }
    </style>

script要引入：

<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true" type="text/javascript" charset="utf-8"></script>

html:

<div id="map"></div>

js:

// 创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }

    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("map");//在百度地图容器中新建一个地图
        var point = new BMap.Point(116.348628, 39.732555);//定义一个中心点坐标(即设置地方的精度和维度)
        map.centerAndZoom(point, 12);//设定地图的中心点和地图级别并将地图显示在地图容器中
        window.map = map;//将map变量放在全局
    }

    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小，默认禁用
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用
        map.enableKeyboard();// 启用键盘操作，默认禁用
    }

    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: 1
        });
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrl_sca);
        //向地图中添加全景图
        var ctrl_pano = new BMap.PanoramaControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrl_pano);
         //向地图中添加定位
         var ctrl_geo = new BMap.GeolocationControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrl_geo);
    }
    initMap();//创建和初始化地图
    let startPoint = new window.BMap.Point(121.441957,31.217516);
    let endPoint = new window.BMap.Point(121.44211,31.218242);
    // 添加起始icon
    let startPointIcon = new window.BMap.Icon("images/nav1.jpg", new window.BMap.Size(36, 42), {
        imageSize: new window.BMap.Size(36, 42),
        anchor: new window.BMap.Size(18, 42)
    });
    var bikeMarkerStart = new window.BMap.Marker(startPoint, { icon: startPointIcon });
    this.map.addOverlay(bikeMarkerStart);

    let endPointIcon = new window.BMap.Icon("images/nav2.jpg", new window.BMap.Size(36, 42), {
        imageSize: new window.BMap.Size(36, 42),
        anchor: new window.BMap.Size(18, 42)
    });
    var bikeMarkerEnd = new window.BMap.Marker(endPoint, { icon: endPointIcon });
    this.map.addOverlay(bikeMarkerEnd);

    var polyline = new BMap.Polyline([
    new BMap.Point(121.441957,31.217516),
    new BMap.Point(121.441634,31.218033),
    new BMap.Point(121.44211,31.218242)
    ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
    map.addOverlay(polyline);
    strokeColor:"blue" // 线路的颜色,也可以用十六进数来写，比如黑色就用#000000
    strokeWeight:6// 画的路线的宽度
    strokeOpacity:0.5 // 画的路线的透明度

当然也可以添加点击地图上的一些事件。