百度地图的运用

最近项目开发有一个需求是关于地图操作的，学了挺多东西的。so记录下来 --- 01 19 Friday
主要用到的地方是百度地图的 JavaScript 跟web服务Api
更新后的2.0版本需要用到AK所以开发前还是申请一个吧
认证步骤：
http://lbsyun.baidu.com/ ->控制台->创建应用->未认证
先说一下web服务Api
a.地点检索服务
详情参数参考：http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-placeapi

1.行政区划区域检索

http://api.map.baidu.com/place/v2/search?query=ATM机&tag=银行&region=北京&output=json&ak=您的ak //GET请求

2.周边检索

    http://api.map.baidu.com/place/v2/search?query=银行&location=39.915,116.404&radius=2000&output=xml&ak=您的密钥 //GET请求

3.矩形区域检索

    http://api.map.baidu.com/place/v2/search?query=银行&bounds=39.915,116.404,39.975,116.414&output=json&ak={您的密钥} //GET请求

4.地点详情检索服务

    http://api.map.baidu.com/place/v2/detail?uid=5a8fb739999a70a54207c130&output=json&scope=2&ak=您的密钥 //GET请求

b.静态图API
详情参数参考：http://lbsyun.baidu.com/index.php?title=static

    http://api.map.baidu.com/staticimage/v2?width=280&height=140&zoom=13&ak=您的ak

示例效果：得到一张280*140，缩放级别为3的北京市地图。

v2 (1).png

    http://api.map.baidu.com/staticimage/v2?width=400&height=200&center=北京&markers=百度大厦|116.403874,39.914888&zoom=10&markerStyles=s,A,0xff0000&ak=您的ak

示例效果：得到一张多个普通标注点的地图图片

v2.png

然后再看一下JavaScript的简单运用吧
首先是百度地图sdk的运用

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

1.地图展示

    <script type="text/javascript">
    var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915));  // 初始化地图,设置中心点坐标
        map.centerAndZoom(point, 14);  //设置地图的缩放级别
        map.setCurrentCity("北京");          // 设置地图显示的城市
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    </script>

2.创建一个圆

    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    
    var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆
    map.addOverlay(circle);            //增加圆

image.png

3.设置新的图表

    <script type="text/javascript">
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);

    //创建小狐狸
    var pt = new BMap.Point(116.417, 39.909);
    var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
    var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    map.addOverlay(marker2);              // 将标注添加到地图中
      </script>

image.png

目前用到的就这么多

最后编辑于：2018.01.19 16:41:05