百度地图的使用

初始化

1.注册开发者账号
2.导入百度地图

<script
 type="text/javascript" src="http://api.map.baidu.com/api?
v=3.0&ak=xXG1mRKBlEuHLGQ8fkRe7Li5XgkCFTxA">
</script>

3.准备存放地图div

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

4.创建地图

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

5.添加中心点和缩放

var point = new BMap.Point(113.665, 34.784);
// 创建点坐标  
map.centerAndZoom(point, 16);

地图控制

map.enableScrollWheelZoom(true);//可以滚动缩放
map.addControl(new BMap.NavigationControl());//地图导航工具
map.addControl(new BMap.ScaleControl());//缩放控制
map.addControl(new BMap.OverviewMapControl());//概览
map.addControl(new BMap.MapTypeControl());//地图类型

覆盖

1.点

• 创建点

var point = new BMap.Point(113.665, 34.784);
var marker = new BMap.Marker(point);

• 显示点

map.addOverlay(marker);

• 图标

//创建一个自定义标注
let icon = new BMap.Icon(
	"./assets/start_point.png",//图片的地址
	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});
//把标注点添加到地图
map.addOverlay(marker);

2.圆

• 创建圆

map.addOverlay(marker);
//添加一个圆圈
var circle = new BMap.Circle(
point,//圆圈中心点
500,//半径
{strokeColor:"blue",strokeWeight:2,fillOpacity:0.4}
);

• 显示圆

map.addOverlay(circle);

3.多边形

• 创建多边形

//多边形
var polygon = new BMap.Polygon([
	new BMap.Point(115.4068020323844,31.80963174625623),
	new BMap.Point(115.40831118564117,31.807514413552397),
	new BMap.Point(115.41319796761545,31.808895288265354),
	new BMap.Point(115.4111857632731,31.811503550297587),
	new BMap.Point(115.40917355893075,31.81064436631286),
	new BMap.Point(115.4068020323844,31.80963174625623)
],
{strokeColor:"orange",strokeWeight:2,fillColor:"blue",fillOpacity:0.3});

• 显示多边形

map.addOverlay(polygon);

事件

map.addEventListener("click",e=>{
end = new BMap.Point(e.point.lng,e.point.lat);}
//e.point  单击点的经纬度

信息窗口

1.创建信息窗口

//添加信息窗口(文字信息)
var info = new BMap.InfoWindow(
	 `<div class="info">
			<p>web前端从入门到放弃</p>
			<p>程序员高危职业</p>
	</div>`,
	{title:"web前端谁学谁知道"}
 )
//定义弹出框
marker.addEventListener("click",()=>{
		map.openInfoWindow(info,point);
			 //单击点弹出窗口
 })

2.显示信息窗口

map.openInfoWindow(info,point);

搜索

1.创建搜索

//添加搜索
let local = new BMap.LocalSearch(map,{
	renderOptions:{map:map}
 })

2.搜索关键字

 function blurHd(v){//blurHd搜索框的id
local.search(v);
}

导航

1.创建导航

var driving = new BMap.DrivingRoute(map,{
	renderOptions:{map:map,autoViewport:true}
})

2.执行导航

let end = null;//定义一个终点
		 map.addEventListener("click",e=>{
			 end = new BMap.Point(e.point.lng,e.point.lat);
			//创建一个点
			 var marker2 = new BMap.Marker(end);
			 map.addOverlay(marker2);
			 //搜索路径
			 driving.search(point,end);
		 })

api

1.通过给请求api服务器地址，返回相对应的数据
2.ip获取城市名称

 $(function(){
		$.ajax({
			url:"http://api.map.baidu.com/location/ip?ak=xXG1mRKBlEuHLGQ8fkRe7Li5XgkCFTxA&coor=bd09ll$output=jsonp",
			dataType:"jsonp",
			success(res){
			 	console.log(res);
			 	$("#location").html(res.content.address)
			 }
		})
 })