zoukankan      html  css  js  c++  java
  • 详解百度地图创建地图、定位、标签、距离、驾车路线、跳动动画的标注代码示例

    效果图:

     

    原码如下:

    注意引用百度api,1.5版本以后的百度地图需要ak,ak百度开放的开发者平台中申请。

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=#########################################"></script>
    <%@ page contentType="text/html; charset=GBK" pageEncoding="GBK"%>
    <html>
    <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1a5a8cf2b94e860131ca3833cc43635f"></script>
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        .center-in-center{
         width: 100%;height: 90%;
         border:3px solid #519EE6;
         }   
        
    </style>
      <body>
          
        <div id='divMap' style="position: absolute; z-index: 9;  100%;height: 85%;">
            <div id="divMapClose" style="position: absolute; z-index: 13; float:right; right:10;top:20;">
                <img id="mapClose" src="<%=ctx%>imagesclose.png" style="background-color: transparent; 30px;height:30px;" onclick="closeMap();"/>
            </div> 
            <div id='divMapDesc' style="background-color:white">
            </div>
            <div id='allmap' class="center-in-center">
            </div>
           </div>
      </body>
    <script type="text/javascript">
    dojo.addOnLoad(initMap);
    function initMap(){
        //初始化隐藏图层
        $("#divMap").hide();
    }
    //显示地图
    function mapShow(svblRowId){
        if(svblRowId == null || svblRowId<=0){
            return ;
        }
        //获得照片信息并动态加载
        //var svblRowId = dcEdit.getDataStore("svblEditDataStore").getRowSet().getRow(0).getItemValue("svbl_ROW_ID");
        var catagory = {
                sqlId : "css.sv.svgl.svlr.Svlr4Detail.[search-by-map]",
                condition : {
                    ssm_SERV_BILL_ID : svblRowId
                },
                storeId : "imgDataStore",
                load : function(dc) {
                    if(dc.getDataStore("imgDataStore").getRowSet().getRowCount()==0){
                        return;
                    }
                        $("#divMap").show();
                    $("#divBigImg").hide();
                    // 百度地图API功能
                    var map = new BMap.Map("allmap");
                    map.enableScrollWheelZoom();//启用地图滚轮放大缩小
                    map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
                    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 p1 = null;//起点
                    var p2 = null;//终点
                    var mycars=new Array();//途经点
                    var index = 0;
                    dc.getDataStore("imgDataStore").getRowSet().forEach(function(row){
                        if(row.getItemValue("ENGINEER_STATUS")=='A'){//A接单,B拍照,C完工
                            p1 = new BMap.Point(row.getItemValue("LONGITUDE"),row.getItemValue("LATITUDE"));
                        }
                        if(row.getItemValue("ENGINEER_STATUS")=='C'){//C完工
                            p2 = new BMap.Point(row.getItemValue("LONGITUDE"),row.getItemValue("LATITUDE"));
                        }
                        if(row.getItemValue("ENGINEER_STATUS")=='B'){//B拍照
                            var p = new BMap.Point(row.getItemValue("LONGITUDE"),row.getItemValue("LATITUDE"));
                            mycars[index] = p;
                            var marker = new BMap.Marker(p);  // 创建标注
                            map.addOverlay(marker);           // 将标注添加到地图中
                            var label = new BMap.Label("客户现场拍照扫码",{offset:new BMap.Size(0,0)});
                            marker.setLabel(label);
                            index++;
                        }
                    });
                    if(p1 == null || p2 == null){
                        $("#divMap").hide();
                        return;
                    }
                    map.centerAndZoom(p1, 12);//创建地图
                    //计算驾车距离
                    var output = "从工程师接单到提交完工驾车需要";
                    var searchComplete = function (results){
                        if (driving.getStatus() != BMAP_STATUS_SUCCESS){
                            return ;
                        }
                        var plan = results.getPlan(0);
                        output += plan.getDuration(true) + "
    ";                //获取时间
                        output += "总路程为:" ;
                        output += plan.getDistance(true) + "
    ";             //获取距离
                    }
                    
                    var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},
                        onSearchComplete: searchComplete,
                        onPolylinesSet: function(){
                            setTimeout(function(){
                                $("#divMapDesc").html(output);
                            },"1000");
                        }
                    });
                    driving.search(p1, p2,{waypoints:mycars});//waypoints表示途经点
                    var marker1 = new BMap.Marker(p1);  // 创建标注
                    map.addOverlay(marker1);              // 将标注添加到地图中
                    var label1 = new BMap.Label("工程单接单",{offset:new BMap.Size(10,-10)});
                    marker1.setLabel(label1);
                    var marker2 = new BMap.Marker(p2);  // 创建标注
                    map.addOverlay(marker2);              // 将标注添加到地图中
                    var label2 = new BMap.Label("工程单完工",{offset:new BMap.Size(20,-20)});
                    marker2.setLabel(label2);
                    
                    //添加客户地址标记
                    var provinceMap = dcEdit.getDataStore("cscmEditDataStore").getRowSet().getRow(0).getItemValue("cscm_PROVINCE_NAME");
                    var cityMap = dcEdit.getDataStore("cscmEditDataStore").getRowSet().getRow(0).getItemValue("cscm_CITY_NAME");
                    var districtMap = dcEdit.getDataStore("cscmEditDataStore").getRowSet().getRow(0).getItemValue("cscm_DISTRICT_NAME");
                    var roadMap = dcEdit.getDataStore("cscmEditDataStore").getRowSet().getRow(0).getItemValue("cscm_ROAD_NAME");
                    var addressMap = dcEdit.getDataStore("cscmEditDataStore").getRowSet().getRow(0).getItemValue("cscm_ADDRESS");
                    //var markerAddress = new BMap.Marker(provinceMap+cityMap+districtMap+roadMap+addressMap);  // 创建标注
                    // 创建地址解析器实例
                    var myGeo = new BMap.Geocoder();
                    // 将地址解析结果显示在地图上,并调整地图视野
                    myGeo.getPoint(provinceMap+cityMap+districtMap+roadMap+addressMap, function(point){
                        if (point) {
                            var marker = new BMap.Marker(point);  // 创建标注
                            var label = new BMap.Label("客户地址",{offset:new BMap.Size(30,-30)});
                            marker.setLabel(label);
                            map.addOverlay(marker);// 将标注添加到地图中
                            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                        }else{
                            //alert("您选择地址没有解析到结果!");
                        }
                    }, provinceMap);
                }
            };
        unieap.Action.getListBySql(catagory);
    }
    function closeMap (){
        $("#divMap").hide();
    }
    </script>
    </html>
  • 相关阅读:
    < java.util >-- Set接口
    Codeforces 627 A. XOR Equation (数学)
    Codeforces 161 B. Discounts (贪心)
    Codeforces 161 D. Distance in Tree (树dp)
    HDU 5534 Partial Tree (完全背包变形)
    HDU 5927 Auxiliary Set (dfs)
    Codeforces 27E. Number With The Given Amount Of Divisors (暴力)
    lght oj 1257
    Codeforces 219D. Choosing Capital for Treeland (树dp)
    Codeforces 479E. Riding in a Lift (dp + 前缀和优化)
  • 原文地址:https://www.cnblogs.com/chenv/p/6437218.html
Copyright © 2011-2022 走看看