web开发百度地图

最新推荐文章于 2021-06-19 10:45:47 发布

xyuan_07

最新推荐文章于 2021-06-19 10:45:47 发布

阅读量967

点赞数

分类专栏： web开发之百度地图文章标签： web开发百度地图

本文链接：https://blog.csdn.net/xyuan_07/article/details/46969451

版权

web开发之百度地图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

公司网站需要百度地图的支持，最近从一点没接触过，到开始看官网api一点点开发，算是小菜鸟的学习笔记

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:70%;width:70%;margin-top:30px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=K9n2sNS1ImQoF38mQHb2h6Ke">
//v1.5版本的引用方式：src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
<script type="text/javascript">
</script>

</head>

<body>
<div id="container"></div>
<div ><input type="button" οnclick="drawPline();" value="refresh!"/></div>
<script type="text/javascript">

              // 创建地图实例
   function createBMap(point,level) {
        var map = new BMap.Map("container");

        map.centerAndZoom(point, level);
   //    map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]}));
   // map.setMapType(new MapType().BMAP_SATELLITE_MAP);
        map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();     //启用地图惯性拖拽，默认禁用

        map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
   // map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL})); //右上角，仅包含平移和缩放按钮
   //   map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN})); //左下角，仅包含平移按钮
        map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角，仅包含缩放按钮

        map.addControl(new BMap.ScaleControl());    // 添加默认比例尺控件
        map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); // 左上
   // map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_RIGHT})); // 右上
      // map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));   // 左下
        map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT})); // 右下
        return map;
   }
   function drawPoint(){
       var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
       var point_dot = new BMap.Point(GetRandomNum_X(1,10),GetRandomNum_Y(1,10));
       walking.search(new BMap.Point(116.399, 39.910),point);
   }

   var point =[    /***此大段的坐标为北京新发地农产品批发市场到国贸的路线坐标。哭。。。老板要看这一段，目前没有信息反馈只能手工模拟**/
       //new BMap.Point(116.399, 39.910),
       new BMap.Point(116.345295,39.828504),new BMap.Point(116.345296,39.828692),
       new BMap.Point(116.345691,39.828685),new BMap.Point(116.347016,39.828654),
       new BMap.Point(116.348117,39.828609),
       new BMap.Point(116.348215,39.828595), new BMap.Point(116.349208,39.828453),
       new BMap.Point(116.3514,39.828179), new BMap.Point(116.352051,39.828089),
       new BMap.Point(116.352334,39.830119), new BMap.Point(116.352568,39.831635),
       new BMap.Point(116.352842,39.833339), new BMap.Point(116.352949,39.833821),
       new BMap.Point(116.353062,39.83407), new BMap.Point(116.353273,39.834323),
       new BMap.Point(116.354989,39.835666), new BMap.Point(116.355725,39.836186),
       new BMap.Point(116.356102,39.836348), new BMap.Point(116.356093,39.836338),
       new BMap.Point(116.3567,39.836456), new BMap.Point(116.356969,39.836473),
       new BMap.Point(116.356884,39.836466), new BMap.Point(116.357926,39.836511),
       new BMap.Point(116.360239,39.836549), new BMap.Point(116.361986,39.836584),
       new BMap.Point(116.363769,39.836622), new BMap.Point(116.365629,39.836636),
       new BMap.Point(116.36624,39.83665), new BMap.Point(116.366837,39.836632),
       new BMap.Point(116.367484,39.836643), new BMap.Point(116.367677,39.836667),
        new BMap.Point(116.36867,39.836695), new BMap.Point(116.369096,39.836844),
        new BMap.Point(116.370857,39.836927), new BMap.Point(116.372577,39.836972),
        new BMap.Point(116.372703,39.836986), new BMap.Point(116.374769,39.837065),
        new BMap.Point(116.376233,39.837152), new BMap.Point(116.377644,39.837211),
        new BMap.Point(116.379723,39.837328), new BMap.Point(116.382037,39.837439),
        new BMap.Point(116.383353,39.837505), new BMap.Point(116.38527,39.837602),
        new BMap.Point(116.388118,39.83772), new BMap.Point(116.389973,39.837796),
        new BMap.Point(116.393027,39.837938), new BMap.Point(116.395552,39.838049),
        new BMap.Point(116.400043,39.838194), new BMap.Point(116.402936,39.838322),
        new BMap.Point(116.406156,39.838423), new BMap.Point(116.409291,39.838502),
        new BMap.Point(116.413837,39.83852), new BMap.Point(116.418099,39.838488),
        new BMap.Point(116.421845,39.83843), new BMap.Point(116.424405,39.838381),
        new BMap.Point(116.425339,39.83835), new BMap.Point(116.425829,39.83827),
        new BMap.Point(116.426071,39.83826), new BMap.Point(116.426898,39.83826),
        new BMap.Point(116.42776,39.838246), new BMap.Point(116.429238,39.838035),
        new BMap.Point(116.430267,39.837927), new BMap.Point(116.431039,39.837862),
        new BMap.Point(116.431331,39.837692), new BMap.Point(116.431358,39.837481),
        new BMap.Point(116.431178,39.837141), new BMap.Point(116.431115,39.837083),
        new BMap.Point(116.430909,39.836986), new BMap.Point(116.430774,39.836968),
        new BMap.Point(116.43063,39.837003), new BMap.Point(116.430617,39.836999),
        new BMap.Point(116.430505,39.837031), new BMap.Point(116.430388,39.837069),
        new BMap.Point(116.430352,39.837079), new BMap.Point(116.430114,39.837308),
        new BMap.Point(116.430064,39.837446), new BMap.Point(116.430087,39.837865),
        new BMap.Point(116.43015,39.838447), new BMap.Point(116.430064,39.839136),
        new BMap.Point(116.43006,39.839233), new BMap.Point(116.429889,39.839867),
        new BMap.Point(116.429853,39.839929), new BMap.Point(116.429301,39.840895),
        new BMap.Point(116.428668,39.841906), new BMap.Point(116.428268,39.842872),
        new BMap.Point(116.428187,39.843426), new BMap.Point(116.428277,39.845535),
        new BMap.Point(116.428371,39.848429), new BMap.Point(116.428367,39.850583),
        new BMap.Point(116.428344,39.852438), new BMap.Point(116.428389,39.854785),
       new BMap.Point(116.428438,39.857015), new BMap.Point(116.428537,39.860404),
       new BMap.Point(116.428596,39.862443), new BMap.Point(116.428587,39.863426),
       new BMap.Point(116.43024,39.863682), new BMap.Point(116.431309,39.863844),
       new BMap.Point(116.432032,39.86408), new BMap.Point(116.433442,39.864249),
       new BMap.Point(116.436761,39.864409), new BMap.Point(116.438226,39.864471),
       new BMap.Point(116.439717,39.864703), new BMap.Point(116.442003,39.864654),
       new BMap.Point(116.4434,39.864731), new BMap.Point(116.44499,39.864744),
       new BMap.Point(116.448385,39.864623), new BMap.Point(116.450883,39.864554),
       new BMap.Point(116.452976,39.864551), new BMap.Point(116.454431,39.86472),
       new BMap.Point(116.457121,39.865568), new BMap.Point(116.459084,39.866655),
       new BMap.Point(116.460445,39.867693), new BMap.Point(116.463378,39.870057),
        new BMap.Point(116.465777,39.872002), new BMap.Point(116.466531,39.87265),
        new BMap.Point(116.466967,39.873131), new BMap.Point(116.467461,39.873986),
        new BMap.Point(116.467712,39.875052), new BMap.Point(116.467775,39.877322),
        new BMap.Point(116.467852,39.880803), new BMap.Point(116.467937,39.885921),
        new BMap.Point(116.46804,39.89089), new BMap.Point(116.468072,39.894765),
        new BMap.Point(116.468153,39.898515), new BMap.Point(116.468233,39.902622),
        new BMap.Point(116.468404,39.903144), new BMap.Point(116.468445,39.905313),
        new BMap.Point(116.468454,39.906275), new BMap.Point(116.468404,39.906382),
        new BMap.Point(116.468498,39.908634), new BMap.Point(116.46862,39.909181),
        new BMap.Point(116.468602,39.911585), new BMap.Point(116.468804,39.912107),
        new BMap.Point(116.468804,39.912802), new BMap.Point(116.468692,39.91319),
        new BMap.Point(116.468714,39.914756), new BMap.Point(116.468701,39.914144),
        new BMap.Point(116.467434,39.914155), new BMap.Point(116.466666,39.914137),
        new BMap.Point(116.467524,39.914319)
   ];
   var i = 0;
   var map = createBMap(point[i],15);
   var point_car = [];
   var marker2 ;
    function drawPline(){
    var bs = map.getBounds();   //获取可视区域
    var bssw = bs.getSouthWest();   //可视区域左下角
    var bsne = bs.getNorthEast();   //可视区域右上角

    var topLat = bsne.lat;
    var bottomLat = bssw.lat;
    var leftLng = bssw.lng;
    var rightLng = bsne.lng;

       var length=2;
       //for(i;i<length+i;i++){
           point_car.push(point[i]);
           point_car.push(point[i+1]);
       //}
           var pt = point[i+1];
       i = i+2;
       drawPolyline(map,point_car);

   var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(20,25));
   if(pt.lat>topLat||pt.lat<bottomLat||pt.lng<leftLng||pt.lng>rightLng){
       map = createBMap(pt,15);
       drawPolyline(map,point_car);
   }
   map.removeOverlay(marker2);
   marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注

   map.addOverlay(marker2);              // 将标注添加到地图中
   }
   function GetRandomNum(Min,Max)
   {
       var Range = Max - Min;
       var Rand = Math.random();
       return (Min + Math.round(Rand * Range));
   }

/**
* 画线
* @param bMap
* @param points
*/
function drawPolyline(bMap, points) {
bMap = map;
    if (points==null || points.length<=1) {
        return;
    }
    bMap.addOverlay(new BMap.Polyline(points, {
        strokeColor : "red",
        strokeWeight : 3,
        strokeOpacity : 0.5

    })); // 画线
}

</script>
</body>
</html>

xyuan_07

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web开发百度地图

公司网站需要百度地图的支持，最近从一点没接触过，到开始看官网api一点点开发，算是小菜鸟的学习笔记 Hello, World html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:70%;width:70%;margin-top:3
复制链接

扫一扫

专栏目录