百度地图显示多点连线+数字标注



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ><head>    <title>（按钮）</title></head><body >    <div>        <fieldset >                     （附近11）        </fieldset>        <fieldset>            <div style="min-height: 400px; 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"},                    { title: "2",point: "116.340934,40.013401"},                    { title: "3", point: "116.342213,40.041267"},                  { title: "4", point: "116.342223,40.042267"},                 { title: "5", point: "116.342233,40.043267"},                 { title: "6", point: "116.352243,40.044267"},                 { title: "7", point: "116.342253,40.045267"},                 { title: "8", point: "116.342263,40.046267"},                 { title: "9", point: "116.342273,40.047267"},                 { title: "10", point: "116.342283,40.087267"},                    { title: "11", point: "116.342293,40.097267"},                    { title: "12", point: "116.442203,40.007267"}                ];

                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]);                       }                     //绘制点                     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) {                            // 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);

                                var info = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;color:"+clo+";’>" +poi.title+ "</p>"); // 创建信息窗口对象                               marker.addEventListener("mouseover", openInfoWinFun);                               var openInfoWinFun = function () {                                   this.openInfoWindow(info);                                };                        }                }

                // 添加标注                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() {                    var load = document.createElement("script");                    load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";                    document.body.appendChild(load);                }

                  /**                    * 画线                  * @param bMap                    * @param points                  */                   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>        </fieldset>    </div></body></html>

百度地图显示多点连线+数字标注相关推荐

网页中调用百度地图显示公司位置并且红色标注
代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
uni-app支付宝小程序map地图组件基础操作+画多边形+打点连线
我们可以参考uni-app官网链接地图块显示气泡标注和多边形 <mapv-if="longitude && latitude"style="wi ...
【PP-YOLOE+】第18届全国大学生智能汽车竞赛百度完全模型组线上资格
★★★ 本文源自AlStudio社区精品项目,[点击此处]查看更多精品内容 >>> 第十八届全国大学生智能汽车竞赛-百度完全模型组-线上资格赛基线 1.比赛背景介绍全国大学生智 ...
百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...
JavaScript|拖拽|仿Android手机九点连线开锁
最简单的JavaScript拖动代码 <script> var xx=0,yy=0; function a(v) { xx=event.x-v.offsetLeft; yy=event.y ...
求两点连线与其中一点为球心球的交点——赋MATLAB代码
在轨迹规划过程中,常将其它智能体视为具有一定半径的球形障碍物(或圆形障碍物).若求智能体与障碍物最近的边缘点,其本质即求两点连线与其中一点为球心球的交点. 求的方法有多种,这里采用雅克比矩阵的方法. ...
python plt绘制柱状图形+柱状图增加数字标注
python绘制柱状图形+柱状图增加数字标注 data = pd.Series([4, 5, 6], index=['A','B','C']) fig = plt.figure(figsize=(7, ...
已知两点，求两点与原点连线的角度
/* 怎么求夹角:已知两点坐标要求其到原点连线的夹角, 那么我们可以用向量去做, 用向量的积除以向量模的乘积,在求其反函数, 然后转换为角度就可以知道其角度为多少了: 向量的模的乘积怎么算: sqrt ...
髂嵴最高点在哪里_两侧髂嵴最高点连线约平 ( )
[单选题]胸骨角两侧( ) [单选题]下列不属于非语言沟通技巧的是() [单选题]历史上护士的最初形象是() [单选题]护士作为管理协调者的角色是因为护士在临床护理中要() [简答题]湖泊受到大量有机 ...

百度地图显示多点连线+数字标注

百度地图显示多点连线+数字标注相关推荐

最新文章

热门文章