百度地图API-创建多个坐标，连线，信息提示

这是一个多坐标创建，并连线，和信息显示的例子
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script>
    <title></title>
</head>
<body>
    <div>

            <div style="min-height: 800px; width: 100%;" id="map">
            </div>
            <script type="text/javascript">
                var map; //Map实例
                //后台传过来
                var currentLat = 116.345555;
                var currentLon = 40.018661;
                var my = { title: "我的位置" };
                var markerArr = [
                    { title: "1", point: "116.364531,40.057003",name:"这是一个标题", content:"这是内容" },
                    { title: "2", point: "116.340934,40.013401", name: "这是一个标题", content: "这是内容" },
                    { title: "3", point: "116.342213,40.041267", name: "这是一个标题", content: "这是内容" },
                    { title: "4", point: "116.342223,40.042267", name: "这是一个标题", content: "这是内容" },
                    { title: "5", point: "116.342233,40.043267", name: "这是一个标题", content: "这是内容"},
                
                ];

                function map_init() {
                    map = new BMap.Map("map");
                    //第1步：设置地图中心点，当前城市
                    var point = new BMap.Point(currentLat, currentLon);
                    //第2步：初始化地图,设置中心点坐标和地图级别。
                    map.centerAndZoom(point, 14);
                    //第3步：启用滚轮放大缩小
                    map.enableScrollWheelZoom(true);
                    //第4步：向地图中添加缩放控件
                    var ctrlNav = new window.BMap.NavigationControl({
                        anchor: BMAP_ANCHOR_TOP_LEFT,
                        type: BMAP_NAVIGATION_CONTROL_LARGE
                    });
                    map.addControl(ctrlNav);
                    //第5步：向地图中添加缩略图控件
                    var ctrlOve = new window.BMap.OverviewMapControl({
                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                        isOpen: 1
                    });
                    map.addControl(ctrlOve);

                    //第6步：向地图中添加比例尺控件
                    var ctrlSca = new window.BMap.ScaleControl({
                        anchor: BMAP_ANCHOR_BOTTOM_LEFT
                    });
                    map.addControl(ctrlSca);


                    //第7步：绘制点
                    for (var i = 0; i < markerArr.length; i++) {
                        var p0 = markerArr[i].point.split(",")[0];
                        var p1 = markerArr[i].point.split(",")[1];
                        var maker = addMarker(new window.BMap.Point(p0, p1), i);
                        addInfoWindow(maker, markerArr[i], markerArr[i].name, markerArr[i].content);
                    }
                    //绘制点
                    var points = new Array();
                    for (var i = 0; i < markerArr.length; i++) {
                        var p0 = markerArr[i].point.split(",")[0];
                        var p1 = markerArr[i].point.split(",")[1];
                        var thePoint1 = new BMap.Point(p0, p1);
                        points.push(thePoint1);
                    }
                    drawPolyline(map, points);

                    // 添加信息窗口
                    function addInfoWindow(marker, poi,name, content) {
                        // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                        var label = new window.BMap.Label(poi.title, { offset: new window.BMap.Size(2, 1) });
                        marker.setLabel(label);
                        var clo = "";
                        if ("我的位置" == poi.title) {
                            clo = "#FF5782";
                        } else {
                            clo = "#E6FED";
                        }
                        label.setStyle({
                            color: "#fff",
                            fontSize: "16px",
                            backgroundColor: "0.05",
                            border: "0",
                            fontWeight: "bold"
                        });
                        //maps.addOverlay(lab1);

                        addClickHandler(name,content, marker);
                    }
                }
                function addClickHandler(name,content, marker) {
                    marker.addEventListener("click", function (e) {
                        openInfo(name,content, e)
                    }
                    );
                }
                function openInfo(name,content, e) {
                    var opts = {
                        width: 250,     // 信息窗口宽度
                        height: 80,     // 信息窗口高度
                        title: name, // 信息窗口标题
                        enableMessage: true//设置允许信息窗发送短息
                    };
                    var p = e.target;
                    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                    var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象 
                    map.openInfoWindow(infoWindow, point); //开启信息窗口
                }
                // 添加标注
                function addMarker(point, index) {
                    index = 11;
                    var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
                        new BMap.Size(23, 25), {
                            offset: new BMap.Size(10, 25),
                            imageOffset: new BMap.Size(0, 0 - index * 25)

                        });
                    var marker = new BMap.Marker(point, { icon: myIcon });
                    map.addOverlay(marker);
                    return marker;
                }
                //异步调用百度js
                function map_load() {
                    map_init();
                }

                /**
                 * 画线
                 */
                function drawPolyline(bMap, points) {
                    if (points == null || points.length <= 1) {
                        return;
                    }
                    bMap.addOverlay(new BMap.Polyline(points, {
                        strokeColor: "blue",
                        strokeWeight: 3,
                        strokeOpacity: 0.6
                    })); // 画线

                }

                window.onload = map_load;
            </script>
    </div>
</body>
</html>
效果如下：
posted @ 2020-03-14 14:47 ymnets 阅读(2364) 评论(0) 编辑收藏举报
刷新页面返回顶部
百度地图API-创建多个坐标，连线，信息提示

公告
