zoukankan      html  css  js  c++  java
  • 百度地图足迹demo(多点轨迹生成)

    不要忘记引用JQuery//~~~<script src="jquery-1.7.1.min.js" type="text/javascript"></script>

    <!DOCTYPE html>

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body, html, #locationmap { 100%;height: 100%;overflow: hidden;margin:0;}
    </style>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <title>百度地图显示多点位置并连线</title>
    </head>
    <body>
    <div id="locationmap"></div>
    </body>
    </html>
    <script type="text/javascript">
    var city = "北京";
    var map = new BMap.Map("locationmap"); // 百度地图API功能
    map.centerAndZoom(city, 14); // 设置地图显示的城市和地图级别
    map.enableScrollWheelZoom(); // 启用滚轮放大缩小,默认禁用
    map.enableContinuousZoom(); // 启用地图惯性拖拽,默认禁用
    map.addControl(new BMap.NavigationControl());  // 添加默认缩放平移控件
    map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
    map.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
    map.addControl(new BMap.OverviewMapControl());  // 添加缩略地图控件


    $(function(){
    search();
    })


    function search()
    {


    var result = [{"id":'1',"address":"故宫博物馆","userid":"a1","longitude":"116.404355","latitude":"39.922723","datetime":"2016"},
    {"id":'2',"address":"北海公园","userid":"a2","longitude":"116.396307","latitude":"39.932018","datetime":"2016"},
    {"id":'3',"address":"首都博物馆","userid":"a3","longitude":"116.350601","latitude":"39.911434","datetime":"2016"},
    {"id":'4',"address":"清华大学","userid":"a4","longitude":"116.335078","latitude":"40.008106","datetime":"2016"}];
    map.clearOverlays(); // 清除标注信息
       var points = []; // 添加折线运动轨迹
    for(i=0;i<result.length;i++)
       {
    var userid = result[i].userid; // 用户ID
        var longitude = result[i].longitude; // 经度
        var latitude = result[i].latitude; // 纬度
        var address = result[i].address; // 地点
        var sign_time = result[i].datetime; // 签到时间
        var point = new BMap.Point(longitude, latitude); // 填充标注点
        if(i==0)
        {
        city = result[i].address;
        map.centerAndZoom(city, 14);
        map.setCenter(point); // 设置中心坐标
        }
        var tips = userid + "," + sign_time + "," + address;
        addMarker(point, map, tips);
        points.push(point);
       }
    var polyline = new BMap.Polyline(points);
    map.addOverlay(polyline);

    }


    //编写自定义函数,创建标注
    function addMarker(point, map, tips) 
    {
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    //为标注添加文字信息
    var label = new BMap.Label(tips,{offset:new BMap.Size(20,-10)});
    marker.setLabel(label);
    }


    </script>

  • 相关阅读:
    柯南君:看大数据时代下的IT架构(3)消息队列之RabbitMQ-安装、配置与监控
    柯南君:看大数据时代下的IT架构(2)消息队列之RabbitMQ-基础概念详细介绍
    看大数据时代下的IT架构(1)业界消息队列对比
    vagrant打造自己的开发环境
    !!运维博客
    git搭建服务器
    Tuxedo入门学习
    ubuntu环境ceph配置入门(一)
    谷歌技术&quot;三宝&quot;之MapReduce
    Eclipse中SVN的安装步骤(两种)和用法
  • 原文地址:https://www.cnblogs.com/jianyi12/p/5599844.html
Copyright © 2011-2022 走看看