码迷,mamicode.com
首页 > 其他好文 > 详细

百度地图

时间:2018-10-13 22:55:46      阅读:384      评论:0      收藏:0      [点我收藏+]

标签:connect   pac   百度   i++   ges   assets   pre   fill   缩放   

1.创建ak,加载百度地图SDK

https://www.easy-mock.com/mock/5a7278e28d0c633b9c4adbd7/api/order/detail?orderId=1在public文件夹的index.html里添加

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Z6VLb33wYXOcBcWtpVMjPvbU0DpUdQup"></script>

 html

<div id="orderDetailMap" className="order-map"></div>

css

.order-map{
  height: 450px;
  margin: 25px -31px 0;
}

js

    renderMap = (result)=>{
        this.map = new window.BMap.Map(‘orderDetailMap‘);
        // this.map.centerAndZoom(‘北京‘,11);
        // 添加地图控件
        this.addMapControl();
        // 调用路线图绘制方法
        this.drawBikeRoute(result.position_list);
        // 调用服务区绘制方法
        this.drwaServiceArea(result.area);
    }

    // 添加地图控件
    addMapControl = ()=>{
        let map = this.map;
        map.addControl(new window.BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT}));//缩放控件
        map.addControl(new window.BMap.NavigationControl({ anchor: window.BMAP_ANCHOR_TOP_RIGHT }));//导航控件
    }

    // 绘制用户的行驶路线
    drawBikeRoute = (positionList)=>{
        let map = this.map;
        let startPoint = ‘‘;
        let endPoint = ‘‘;
        if (positionList.length>0){
            let first = positionList[0];
            let last = positionList[positionList.length-1];
            startPoint = new window.BMap.Point(first.lon,first.lat);
            let startIcon = new window.BMap.Icon(‘/assets/start_point.png‘,new window.BMap.Size(36,42),{
                imageSize:new window.BMap.Size(36,42),
                anchor: new window.BMap.Size(18, 42)
            })

            let startMarker = new window.BMap.Marker(startPoint, { icon: startIcon});//图标不能直接创建到地图上,只能通过marker
            this.map.addOverlay(startMarker);

            endPoint = new window.BMap.Point(last.lon, last.lat);
            let endIcon = new window.BMap.Icon(‘/assets/end_point.png‘, new window.BMap.Size(36, 42), {
                imageSize: new window.BMap.Size(36, 42),
                anchor: new window.BMap.Size(18, 42)
            })
            let endMarker = new window.BMap.Marker(endPoint, { icon: endIcon });
            this.map.addOverlay(endMarker);

            // 连接路线图
            let trackPoint = [];
            for(let i=0;i<positionList.length;i++){
                let point = positionList[i];
                trackPoint.push(new window.BMap.Point(point.lon, point.lat));
            }

            let polyline = new window.BMap.Polyline(trackPoint,{
                strokeColor:‘#1869AD‘,
                strokeWeight:3,
                strokeOpacity:1
            })
            this.map.addOverlay(polyline);
            this.map.centerAndZoom(endPoint, 11);
        }
        
    }

    // 绘制服务区
    drwaServiceArea = (positionList)=>{
        // 连接路线图
        let trackPoint = [];
        for (let i = 0; i < positionList.length; i++) {
            let point = positionList[i];
            trackPoint.push(new window.BMap.Point(point.lon, point.lat));
        }
        // 绘制服务区
        let polygon = new window.BMap.Polygon(trackPoint, {
            strokeColor: ‘#CE0000‘,
            strokeWeight: 4,
            strokeOpacity: 1,
            fillColor: ‘#ff8605‘,
            fillOpacity:0.4
        })
        this.map.addOverlay(polygon);
    }

技术分享图片

 

 接口数据

HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 2185
Content-Type: application/json; charset=utf-8
Date: Sat, 13 Oct 2018 04:13:54 GMT
Rate-Limit-Remaining: 0
Rate-Limit-Reset: 1539404035
Rate-Limit-Total: 2
Server: Tengine
Vary: Accept, Origin
X-Request-Id: 44f7bfa5-d057-4c82-91cb-721944b55de4

{
  "code": "0",
  "msg": "",
  "result": {
    "status": 2,
    "order_sn": "T1803244422704080JGJI",
    "bike_sn": "802410001",
    "mode": 1,
    "start_location": "北京市昌平区回龙观东大街",
    "end_location": "北京市海淀区奥林匹克公园",
    "city_id": 1,
    "mobile": "13597482075",
    "user_name": "丁磊",
    "distance": 10000,
    "bike_gps": "116.398806,40.008637",
    "start_time": 1521865027000,
    "end_time": 1521865251000,
    "total_time": 224,
    "position_list": [
      {
        "lon": 116.361221,
        "lat": 40.043776
      },
      {
        "lon": 116.363736,
        "lat": 40.038086
      },
      {
        "lon": 116.364599,
        "lat": 40.036484
      },
      {
        "lon": 116.373438,
        "lat": 40.03538
      },
      {
        "lon": 116.377966,
        "lat": 40.036263
      },
      {
        "lon": 116.379762,
        "lat": 40.03654
      },
      {
        "lon": 116.38084,
        "lat": 40.033225
      },
      {
        "lon": 116.38084,
        "lat": 40.029413
      },
      {
        "lon": 116.381343,
        "lat": 40.021291
      },
      {
        "lon": 116.381846,
        "lat": 40.015821
      },
      {
        "lon": 116.382637,
        "lat": 40.008084
      },
      {
        "lon": 116.398806,
        "lat": 40.008637
      }
    ],
    "area": [
      {
        "lon": "116.274737",
        "lat": "40.139759",
        "ts": null
      },
      {
        "lon": "116.316562",
        "lat": "40.144943",
        "ts": null
      },
      {
        "lon": "116.351631",
        "lat": "40.129498",
        "ts": null
      },
      {
        "lon": "116.390582",
        "lat": "40.082481",
        "ts": null
      },
      {
        "lon": "116.38742",
        "lat": "40.01065",
        "ts": null
      },
      {
        "lon": "116.414297",
        "lat": "40.01181",
        "ts": null
      },
      {
        "lon": "116.696242",
        "lat": "39.964035",
        "ts": null
      },
      {
        "lon": "116.494498",
        "lat": "39.851306",
        "ts": null
      },
      {
        "lon": "116.238086",
        "lat": "39.848647",
        "ts": null
      },
      {
        "lon": "116.189454",
        "lat": "39.999418",
        "ts": null
      },
      {
        "lon": "116.244646",
        "lat": "39.990574",
        "ts": null
      },
      {
        "lon": "116.281441",
        "lat": "40.008703",
        "ts": null
      },
      {
        "lon": "116.271092",
        "lat": "40.142201",
        "ts": null
      },
      {
        "lon": "116.271092",
        "lat": "40.142201",
        "ts": null
      }
    ],
    "area_list": null,
    "npl_list": [
      {
        "id": 8265,
        "name": "北辰世纪中心-a座",
        "city_id": 1,
        "type": 3,
        "status": 0,
        "map_point": "116.39338796444|40.008120315215;116.39494038009002|40.008177258745;116.39496911688|40.006268094213;116.39512457763|40.004256795877;116.39360214742|40.004222412241;116.39357190147|40.005075745782;116.39351397873|40.005836165232;116.39338796444|40.008120315215",
        "map_point_array": [
          "116.39338796444|40.008120315215",
          "116.396053|40.008273",
          "116.396448|40.006338",
          "116.396915|40.004266",
          "116.39192|40.004072",
          "116.391525|40.004984",
          "116.391381|40.005924",
          "116.391166|40.007913"
        ],
        "map_status": 1,
        "creator_name": "赵程程",
        "create_time": 1507863539000
      }
    ]
  }
}

 

百度地图

标签:connect   pac   百度   i++   ges   assets   pre   fill   缩放   

原文地址:https://www.cnblogs.com/mosquito18/p/9782351.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!