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>

  • 相关阅读:
    Using Flex swf to load html into frames(转)
    wan886网址导航 Bo9bo高清电影 两个图标 怎么都删不掉
    Flex的新插件BluePrint
    开源——需要分享共享的无私精神
    Flex相关的开发例子与资源收集(转)
    在FLEX中真正的隐藏一个组件,隐藏后不占据自身的位置. (转)
    显示属性里没有桌面选项卡解决办法
    FLEX如何读取XML文件.(转)
    ACTIONSCRIPT技巧,工具,API大收集(国外资源,转载)
    The Top 10 Things You Should Know About Flex (转)
  • 原文地址:https://www.cnblogs.com/jianyi12/p/5599844.html
Copyright © 2011-2022 走看看