百度地图在网页中的简单应用

一、初始化事件

 $(function () {
         /*
           map.addControl(new BMap.MapTypeControl());   //添加地图类型控件 离线只支持电子地图，卫星/三维不支持
           map.setCurrentCity("北京");                  // 设置地图显示的城市 离线地图不支持！！
         */

         //设置地图最小、最大缩放范围
         map = new BMap.Map("container", {
             minZoom: 11,
             maxZoom: 17
         });
       
         map.centerAndZoom(new BMap.Point(118.045549, 36.870928), 17);  // 初始化地图,设置中心点坐标和地图级别
         map.enableScrollWheelZoom(true);                             //开启鼠标滚轮缩放
         map.addControl(new BMap.NavigationControl());
         }

二、在地图上创建叠加物并设置事件

 function createRoad(map,id,crossingName, usergroup, ip, port, coordinate_x, coordinate_y) {
         var isonline = false;
         var myIcon = new BMap.Icon("../../Images/signal_normal.png", new BMap.Size(32, 32));
         if (jsGetWSStatus('http://'+ip.trim()+":"+port.trim()+'/config')) {
             isonline = true;
             if (crossingName == curCrossingName) {
                 map.centerAndZoom(new BMap.Point(coordinate_x, coordinate_y), 17);  // 初始化地图,设置中心点坐标和地图级别
                 myIcon = new BMap.Icon("../../Images/star_signal.png", new BMap.Size(32, 32));
             } else {
                 myIcon = new BMap.Icon("../../Images/signal_online.png", new BMap.Size(32, 32));
             }
         } else {
             myIcon = new BMap.Icon("../../Images/signal_normal.png", new BMap.Size(32, 32));
         }

         var point = new BMap.Point(coordinate_x, coordinate_y);
         var marker = new BMap.Marker(point,{
             icon: myIcon
         });

         map.addOverlay(marker);              // 将标注添加到地图中
           var opts = {
             width: 100,
             height: 200,
             title: '路口信息:'
         };
         var tempstr = '编号:' + id + '<br/>名称:' + crossingName + "<br/>" + '用户组:' + usergroup + "<br/>" + '地理坐标:(' + coordinate_x + ',' + coordinate_y + ')' + "<br/>" + 'IP地址:' + ip + "<br/>" + '端口号:' + port + "<br/>" + '状态:' +(isonline?'在线':'离线');
         var infoWindow = new BMap.InfoWindow(tempstr, opts);

         //鼠标移出事件
         marker.addEventListener('mouseout', function () {
             map.closeInfoWindow(infoWindow); // 关闭信息窗口
         });

         marker.addEventListener("mouseover", function () {
             map.openInfoWindow(infoWindow, point); //开启信息窗口
         });
         //鼠标单击事件注册
         marker.addEventListener('click', function () {
            
         });
         //标记删除事件注册
         marker.addEventListener('remove', function () {
            
         });

         // 标记右键事件注册
         marker.addEventListener('rightclick', function () {
            
         });

         //创建标记右键菜单
         var markermenu = new BMap.ContextMenu();
         var txtMarkerMenuItem = [
             {
                 text: '修改配置',
                 callback: function () {
                     var menuidstr = id;
                   parent.edit_menuitem(menuidstr)
                   
                 }

             }, {
                 text: '删除路口',
                 callback: function () {
                   
                     var menuidstr = id;
                     parent.delete_menuitem(menuidstr);
                     
                 }
             }
         ];
         for (var h = 0; h < txtMarkerMenuItem.length; h++) {
             markermenu.addItem(new BMap.MenuItem(                 // 定义菜单项实例
                 txtMarkerMenuItem[h].text,                        // 传入菜单项的显示文本
                 txtMarkerMenuItem[h].callback,                    // 传入菜单项的回调函数
                 {
                     width: 70,                                    // 指定菜单项的宽度
                     icon: myIcon                                  // 指定菜单项dom的id
                 }
             ));
         }
         //绑定标记右键菜单
         marker.addContextMenu(markermenu);
         return marker;
     }

三、创建快捷菜单

function createMapContextMenu(map) {
         //创建地图右键菜单
         var menu = new BMap.ContextMenu();
         var txtMenuItem = [
             {
                 text: '创建路口',
                 callback: function (e) {
                     parent.add_menuitem(e);
                 }
             }
         ];
         for (var t = 0; t < txtMenuItem.length; t++) {
             menu.addItem(new BMap.MenuItem(               // 定义菜单项实例
                 txtMenuItem[t].text,                        // 传入菜单项的显示文本
                 txtMenuItem[t].callback,                    // 传入菜单项的回调函数
                 {
                     width: 70,                             // 指定菜单项的宽度
                 }
             ));
         }
         //绑定地图右键菜单
         map.addContextMenu(menu);

     }

技术交流与业务合作：QQ：375172665