百度地图
2020-04-15 本文已影响0人
Daeeman
1. 基本用法
<!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:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥">
//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");
// 创建地图实例
var point = new BMap.Point(116.404, 39.915);
// 创建点坐标
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>
1. 适应移动端页面展示
下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
2. 设置容器样式
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
3. 引用百度地图API文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
4. 创建地图容器元素
<div id="container"></div>
5. 创建地图实例
位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
var map = new BMap.Map("container");
注意：
命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。
6. 设置中心点坐标
var point = new BMap.Point(116.404, 39.915);
注意：在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法！！！
7. 地图初始化，同时设置地图展示缩放级别
在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。
map.centerAndZoom(point, 15);
添加控件
addMapCtrl();
// 添加地图控制
function addMapCtrl(){
map.enableScrollWheelZoom(true); //地图可以缩放,鼠标滚轮
map.addControl(new BMap.NavigationControl()); // 地图导航
map.addControl(new BMap.ScaleControl()); // 缩放控件
map.addControl(new BMap.OverviewMapControl()); //概况
map.addControl(new BMap.MapTypeControl()); //地图类型
}
2. 添加标注（覆盖物）
a. 小图标
<div id="container"></div>
<script>
var map = new BMap.Map("container");
// 初始化地图
var point = new BMap.Point(113.665, 34.784);
// 指定地图中心点(精度，纬度)
map.centerAndZoom(point, 16);
// 地图指定中心和缩放层次
map.enableScrollWheelZoom(true); //地图可以缩放
// 自定义标注
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);
// 添加标注到地图
</script>
b. 圆
var circle = new BMap.Circle(
point,
// 中心点位置
500,
// 半径
{strokeColor:"blue",strokeWeight:2,strokeOpacity:0.5,fillOpacity:0.4})
// stroke边框 fill 填充 Opacity透明度
map.addOverlay(circle);
c. 多边形
var polygon = new BMap.Polygon([
new BMap.Point(113.6729090076618, 34.792850585314234),
new BMap.Point(113.67341716599596, 34.780524355204825),
new BMap.Point(113.65634304596864, 34.78010506298753),
new BMap.Point(113.64841577595597, 34.79184443213241)
],
// 多边形顶点
{strokeColor:"orange",strokeWeight:2,strokeOpacity:0.5,fillColor:'blue',fillOpacity:0.1})
// 边框填充颜色与透明度
map.addOverlay(polygon);
d. 折线
var marker = new BMap.Marker(point,{icon:Icon})
// 创建一个标注
map.addOverlay(marker);
// 添加标注到地图
// 地图事件
map.addEventListener("click",e=>{
console.log(e);
console.log(e.point);
let marker = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat))
map.addOverlay(marker);
// 单击在页面中添加一个点
// point 就是当前的经度纬度
})
let line = new BMap.Polyline([
new BMap.Point(113.665, 34.784),
new BMap.Point(113.66478440667755, 34.78598630008208),
new BMap.Point(113.66747932320749, 34.78672745622025),
new BMap.Point(113.66823389983587, 34.7868905096687),
new BMap.Point(113.66832373038686, 34.787587188920526),
new BMap.Point(113.66909627312545, 34.78763165760732),
],{strokeColor:"red",strokeWidth:2})
map.addOverlay(line);
3. 信息窗口+搜索窗口
<input type="text" onblur="blurHd(this)"/>
<div id="container"></div>
<script>
var map = new BMap.Map("container");
// 初始化地图
var point = new BMap.Point(113.665, 34.784);
// 指定地图中心点(精度，纬度)
map.centerAndZoom(point, 16);
// 地图指定中心和缩放层次
map.enableScrollWheelZoom(true); //地图可以缩放
// 自定义标注
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);
let str = `<div class="info"><p>一入前端深似海<p></div> `;
var info = new BMap.InfoWindow(
str,
{title:'web前端大本营'})
marker.addEventListener("click",()=>{
map.openInfoWindow(info,point)
})
map.openInfoWindow(info,point);
// 创建一个标注
map.addOverlay(marker);
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("景点");
function blurHd(e){
local.search(e.value);
}
// 添加标注到地图
</script>
4. 路径规划
var end = null;
// map.addOverlay(polygon);
map.addEventListener("click",e=>{
console.log(e.point);
end = new BMap.Point(e.point.lng,e.point.lat);
// 单击获取结束的点；
driving.search(point,end)
// 查找两个点的路径
})
// 规划两个点的行车，公交，步行的路线
var driving = new BMap.DrivingRoute(map,{
renderOptions:{map:map,autoViewport:true}
})
5. api 接口
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
// 通过百度api 获取当前的城市
$(function(){
$.ajax({
url:'http://api.map.baidu.com/location/ip?ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde&ip=&coor=bd09ll&output=jsonp',
dataType:"jsonp",
success:function(res){
console.log(res);
$("h1").html(res.content.address);
}
})
})
// 通过百度api 获取当前的城市
$(function(){
$.ajax({
url:'http://api.map.baidu.com/location/ip?ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde&ip=&coor=bd09ll&output=jsonp',
dataType:"jsonp",
success:function(res){
// console.log(res);
$("h1").html(res.content.address);
}
})
// 当searchbox 发生改变时候 再发起ajax请求
$("#searchbox").on("input",function(){
// 显示tip
$(".tip").show();
$.ajax({
url:`http://api.map.baidu.com/place/v2/suggestion?query=${$("#searchbox").val()}®ion=郑州&city_limit=true&output=json&ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde`,
dataType:"jsonp",
success:function(res){
console.log(res)
$(".tip").html(res.result.map(item=>`<p>${item.name}</p>`).join(''));
// 设置tip的内容为result数组返回成p元素 连接为字符串
},
})
})
$(".tip").on("click","p",function(){
local.search($(this).text());
// 执行地图搜索 为当前单击的p标签
$(".tip").hide();
// 隐藏tip
})
})
