2020-05-28

百度地图:

初始化:

注册开发者账号http://lbsyun.baidu.com/apiconsole/key#/home

用<script></script>标签导入百度地图:

```

<scripttype="text/javascript"src="//api.map.baidu.com/apiv=3.0&ak=您的密匙"></script>

```

准备一个div标签 用来存放加载后的百度地图:

<div id="container"></div>

再创建一个<script></script>标签用来书写:

创建百度地图:

var map = new BMap.Map("container");

控制地图的插件:

滚轮缩放 true或false:

map.enableScrollWheelZoom(true);

地图导航(位于左上角,可点击上面的图标进行放大缩小,可选择街、市、省、国四种):

map.addControl(new BMap.NavigationControl());

缩放控制:

map.addControl(new BMap.ScaleControl());

橄榄图(位于右下角一个小箭头,):

map.addControl(new BMap.OverviewMapControl());

地图类型(位于右上角,可切换地图、卫星、三维三种地图类型):

map.addControl(new BMap.MapTypeControl());

覆盖类:

创建点:

var point = new BMap.Point(113.654,34,784);  //创建点的坐标 数字为经纬度

var marker = new BMap.Marker(point);  //创建一个标注点

map.addOverlay(marker)  //把创建的标注点添加到地图中

创建一个标注点:

let icon = new BMap.Icon(

"图片的url地址", //图片的地址

new BMap.Size(36,42), //显示图片的大小

{imageSize:new BMap.Size(36,42),anchor: new BMap.Size(18,42)},

// 把原始图片缩小为36,42,偏移底部中心 (默认是左上角)

)

  var marker = new BMap.Marker(point,{icon:icon}); //把小图标也添加到标注点

创建圆:

var circle = new BMap.Circle(

point,// 圆圈中心点 把圆的中心点设置为点,

500,//半径

{strokeColor:"blue",strokeWeight:2,fillOpacity:0.4}

                //圆边框的颜色    //              //内容区域的透明度(0-1)1为不透明

);

/*添加圆到地图中*/  map.addOverlay(marker);

创建多边形:

var polygon = new BMap.Polygon([

//多边形的开始

new BMap.Point(113.66472152529185,34.78609747393126),

new BMap.Point(113.66772186569519,34.78603076963989),

new BMap.Point(113.66766796736458,34.782999372726685),

new BMap.Point(113.66178406627422,34.78423714494914),

new BMap.Point(113.66473949140206,34.78453361455538),

//多边形的结束

new BMap.Point(113.66472152529185,34.78609747393126)

//多边形的开始与结束经纬度是一致的。这样保证多边形能完整闭合,中间的可  

//随意变换(可添加多个),一般用来标注一个特殊的区域

],

{strokeColor:"orange",  //多边形边缘(边框)的颜色

      strokeWeight:2,       

      fillColor:"blue",      //多边形内容的颜色

      fillOpacity:0.3}      //内容区域的透明度(0-1) 1为不透明

);

/*添加多边形到地图中 */  map.addOverlay(polygon)

事件:

添加事件:

map.addEventListener("click",e=>{

console.log(e.point,e)

})    //单击点的经纬度

信息窗口:

创建信息窗口:

var info = new BMap.InfoWindow(

//使用字符串模板 ``

`<div class="info">

        <h1>content内容</h1>

</div>`,

{title:"标题"}

搜索:

在body里创建一个input标签,添加onblur事件 并绑定searcH函数

<input type="text" onblur="searcH(this.value)"/>

在script里创建搜索:

var local = new BMap.LocalSearch(map,{

renderOptions:{map:map}

})

定义searcH函数:

function searcH(v){

local.search(v);

}  //onblur事件触发后触发该函数,获取value值,

导航:

创建导航:

var driving = new BMap.DrivingRoute(map,{

renderOptions:{map:map,autoViewport:true}

})

  //可定义不同的路线规划方式:

    //  驾车  DrivingRoute

    //  公交  TransitRoute

    //  步行  WalkingRoute

    //  骑行  RidingRoute

创建一个点 通过onClick触发:

map.addEventListener("click",e=>{

//单击后,获取形参e的经纬度,赋值给end

end = new BMap.Point(e.point.lng,e.point.lat)

var marker2 = new BMap.Marker(end)

//把marker2添加到地图中

map.addOverlay(marker2);

//从point开始  到end结束

driving.search(point,end)

})

执行导航:

driving.search(point,end)  //搜索路径

API:

通过给请求api服务器地址,返回对应的数据

ip获取城市名称:

$(function(){

$.ajax({

url:"http://api.map.baidu.com/location/ip?ak=YGQiWbeL4ZMLuPhZEI1icfnnkwLHT69S&coor=bd09ll&output=jsonp",

dataType:"jsonp",

success(res){

console.log(res)

        $("#container").html(res.content.address)

}

})

})  //向url发起请求,使用jsonp类型, 触发成功回调函数

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。