百度地图

百度地图：

初始化：

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

用标签导入百度地图：

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

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

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

再创建一个标签用来书写：

创建百度地图：

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类型， 触发成功回调函数