调用百度地图获取路线,修改覆盖物样式
先上效果图
之后上源码,由于是第一次用地图的api,写的可能有点乱,大家理解下
(function ($) {
$(function () {
var map = new BMap.Map("l-map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(104.072267, 30.663453), 18);
map.enableScrollWheelZoom(true); //启用滚轮放大缩小s
//向地图中添加控件
// var opts = {
// anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
// type: BMAP_ANCHOR_BOTTOM_RIGHT
// }
var dinwei = {
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
offset: new BMap.Size(5, 145)
}
map.addControl(new BMap.GeolocationControl(dinwei));
var markerArr = [
{
title: "咖啡一号店(倍特店)", point: "104.069728,30.676714", address: "成都市青羊区青龙街51号倍特康派1层", tel: "(028)86697801", data: "A", postalCode: "青羊区 610031"
},
{
title: "咖啡一号店(威斯顿店)", point: "104.074035,30.630567", address: "成都市武侯区人民南路四段19号威斯顿联邦大厦1楼", tel: "(028)85268546", data: "B", postalCode: "武侯区 610041"
},
{
title: "咖啡一号店(万象城店)", point: "104.121758,30.655886", address: "成都市成华区双庆路8号华润万象城B1层", tel: "(028)61390740", data: "C", postalCode: "成华区 610066"
},
{
title: "咖啡一号店(群光广场店)", point: "104.083043,30.660061", address: "成都市锦江区东大街春熙路南段8号群光广场负一层", tel: "(028)86664095", data: "D", postalCode: "锦江区 610011"
},
{
title: "咖啡一号店(万达百货店)", point: "104.080253,30.693255", address: "成都市金牛区一环路北三段1号万达广场F1层", tel: "(028)86697801", data: "E", postalCode: "金牛区 610036"
},
{
title: "咖啡一号店(成都锦里店)", point: "104.056298,30.651383", address: "成都市武侯区武侯祠大街231号(近三国茶楼)", tel: "(028)85585132", data: "F", postalCode: "武侯区 610041"
},
{
title: "咖啡一号店(成都宽窄巷子店)", point: "104.06044,30.669663", address: "成都市青羊区宽窄巷子文化保护区窄巷子22号", tel: "(028)86639529", data: "G", postalCode: "青羊区 610031"
},
{
title: "咖啡一号店(成都兰桂坊店)", point: "104.091141,30.649138", address: "成都市锦江区滨江东路兰桂坊第17栋1楼", tel: "(028)84701848", data: "H", postalCode: "锦江区 610011"
},
{
title: "咖啡一号店(成都远洋太古里店)", point: "104.086893,30.659196", address: "成都市锦江区中纱帽街8号成都远洋太古里1楼", tel: "(028)86006721", data: "K", postalCode: "锦江区 610011"
},
{
title: "咖啡一号店(成都丰德国际广场店)", point: "104.077831,30.621667", address: "成都市武侯区新希望路7号丰德万瑞中心A座1层", tel: "(028)85512248", data: "J", postalCode: "武侯区 610041"
},
{
title: "咖啡一号店(成都金沙西单百货店)", point: "104.006269,30.680143", address: "成都市青羊区苏坡东路7号西单商场1-2层", tel: "(028)86129382", data: "K", postalCode: "青羊区 610031"
},
{
title: "咖啡一号店(雅颂居店)", point: "104.050251,30.558112", address: "成都市武侯区荣华北路299号", tel: "(028)85236047", data: "L", postalCode: "武侯区 610041"
},
{
title: "咖啡一号店(成都金融城)", point: "104.072977,30.587139", address: "成都市武侯区天府大道北段966号天府国际金融中心8号楼内", tel: "(028)85987570", data: "M", postalCode: "武侯区 610041"
},
{
title: "咖啡一号店(上海花园店)", point: "104.054934,30.619626", address: "成都市武侯区神仙树南路37号(中海名城对面)", tel: "(028)86031000", data: "N", postalCode: "武侯区 610041"
},
{
title: "咖啡一号店(世豪广场店)", point: "104.052098,30.555797", address: "成都市武侯区剑南大道中段998号世豪广场1层", tel: "(028)65783034", data: "O", postalCode: "武侯区 610041"
}
];
var pointCore = new BMap.Point(104.072267, 30.663453);//创建中心点的坐标
// 为数组对象添加相应的列表
for (let i = 0; i < markerArr.length; i++) {
//获取对象数组中的point中的坐标
var p0 = markerArr[i].point.split(",")[0];
var p1 = markerArr[i].point.split(",")[1];
let pointCurrent = new BMap.Point(p0, p1); //获取遍历对象的坐标
function getDistance(pointArray, pointCurrent) { //获取距离
return map.getDistance(pointArray, pointCurrent).toFixed(0);//调用getDistance,取小数点后两位
}
let distance = getDistance(pointCore, pointCurrent);//将获取到的距离放到变量中
var shopStr = `
<dt>
<img src="../../images/map/icon-info-green.svg" class="first-top">
${markerArr[i].title}
<small>
${markerArr[i].address}
</small>
<span class="distance">${distance} m</span>
<div class="number">
<span class="shop-number">${markerArr[i].data}</span>
<img src="../../images/map/icon-pin-solid-green.svg">
</div>
</dt>
`
//将模版字符串添加到html页面中
$(".shop-list").append(shopStr);
}
var point = new Array(); //存放标注点经纬信息的数组
var marker = new Array(); //存放标注点对象的数组
for (let i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].point.split(",")[0];
var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
var iconImg = new BMap.Icon('../../images/map/icon-pin-solid-grey.svg', new BMap.Size(32, 47), { //设置坐标点的图片,偏移位置,大小
anchor: new BMap.Size(16, 31),
imageSize: new BMap.Size(32, 32)
});
marker[i] = new window.BMap.Marker(point[i], { icon: iconImg }); //按照地图点坐标生成标记
var opts = {
offset: new BMap.Size(10, 2) // 设置文本偏移量
}
// 设置地图上的文本标注
var numLabel = new BMap.Label(markerArr[i].data, opts);
numLabel.setStyle({ //设置文本标注的样式
color: "white", //字体颜色
fontSize: "16px",//字体大小
backgroundColor: "0.05", //文本标注背景颜色
border: "0",
fontWeight: "bold" //字体加粗
});
marker[i].setLabel(numLabel); //将文本标注添加到覆盖物中
map.addOverlay(marker[i]); //将覆盖物添加到地图中
}
$("dl").on("mouseover", "dt", function (e) { //鼠标移入,高亮显示
map.clearOverlays();//清除初始的标记物
let shopNumber = $(this).find(".shop-number").text();//获取店铺的编号信息
for (let i = 0; i < markerArr.length; i++) {
let p0 = markerArr[i].point.split(",")[0];
let p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
if (markerArr[i].data == shopNumber) {//判断条件成功时覆盖物的图片为绿色的
var iconImg = new BMap.Icon('../../images/map/icon-pin-solid-green-map.svg', new BMap.Size(32, 47), { //设置坐标点的图片,偏移位置,大小
anchor: new BMap.Size(16, 31),
imageSize: new BMap.Size(32, 32)
});
} else { //其他不成功的覆盖物的颜色时灰色的
var iconImg = new BMap.Icon('../../images/map/icon-pin-solid-grey.svg', new BMap.Size(32, 47), { //设置坐标点的图片,偏移位置,大小
anchor: new BMap.Size(16, 31),
imageSize: new BMap.Size(32, 32)
});
}
marker[i] = new window.BMap.Marker(point[i], { icon: iconImg }); //按照地图点坐标生成标记
var opts = {
offset: new BMap.Size(10, 2) // 设置文本偏移量
}
marker[i].enableMassClear();
//设置地图上的文本标注
var numLabel = new BMap.Label(markerArr[i].data, opts);
numLabel.setStyle({ //设置文本标注的样式
color: "white", //字体颜色
fontSize: "16px",//字体大小
backgroundColor: "0.05", //文本标注背景颜色
border: "0",
fontWeight: "bold" //字体加粗
});
marker[i].setLabel(numLabel); //将文本标注添加到覆盖物中
map.addOverlay(marker[i]); //将覆盖物添加到地图中
}
})
var imgNode = $("dt").find(".number").eq(2); //将节点存储进去
$("dl").on("click", "dt", function () {
imgNode.prop("src", "../../images/map/icon-pin-solid-grey.svg"); //更改上次节点
$(this).find(".number").find("img").prop("src", "../../images/map/icon-pin-solid-green-map.svg"); //本次的点击事件
imgNode = $(this).find(".number").find("img"); //保存本次的节点
let num = $(this).index(); //当前的列表下标
// console.log(markerArr[num]);
let p0 = markerArr[num].point.split(",")[0];
let p1 = markerArr[num].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point = new window.BMap.Point(p0, p1); //循环生成新的地图点
map.panTo(point); //设置地图的中心点为当前的坐标
})
$("dl").on("click", ".first-top", function () {
$(".details").show(0);
$(".address").hide(0);
$(".shop-list").hide(0)
let num = $(this).parent().index();
$(".store-details").find("h2").text(markerArr[num].title);
$(".locality").text(markerArr[num].address);
$(".postal-code").text(markerArr[num].postalCode)
$(".phone-tel").text(markerArr[num].tel);
$(".route-point").text(markerArr[num].point);
})
$(".header").on("click", "img", function () {
$(this).parent().parent().hide(0);
$(".address").show(0);
$(".shop-list").show(0)
})
$(".route").on("click", function () {
let coordinate = $(".route-point").text();
console.log(coordinate);
let p0 = coordinate.split(",")[0];
let p1 = coordinate.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point1 = new window.BMap.Point(p0, p1); //循环生成新的地图点
console.log(point);
let point2 = new BMap.Point(104.072267, 30.663453);//中心点的坐标
console.log(point1);
map.clearOverlays();//清除地图上的所有覆盖物
var iconImg = new BMap.Icon('../../images/map/icon-pin-solid-green-map.svg', new BMap.Size(32, 47), { //设置坐标点的图片,偏移位置,大小
anchor: new BMap.Size(16, 31),
imageSize: new BMap.Size(34, 34)
});
marker1 = new BMap.Marker(point1, { icon: iconImg }); //按照地图点坐标生成标记
var opts = {
offset: new BMap.Size(8, 2) // 设置文本偏移量
}
marker1.enableMassClear();
//设置地图上的文本标注
var numLabel1 = new BMap.Label("终", opts);
numLabel1.setStyle({ //设置文本标注的样式
color: "white", //字体颜色
fontSize: "16px",//字体大小
backgroundColor: "0.05", //文本标注背景颜色
border: "0",
fontWeight: "bold" //字体加粗
});
marker1.setLabel(numLabel1); //将文本标注添加到覆盖物中
// var marker1 = new BMap.Marker(point1);//创建地图上的一个图像标注
map.addOverlay(marker1);//将覆盖物添加到地图中
// var marker2 = new BMap.Marker(point2);//创建地图上的一个图像标注
var iconImg = new BMap.Icon('../../images/map/icon-pin-solid-green-map.svg', new BMap.Size(32, 47), { //设置坐标点的图片,偏移位置,大小
anchor: new BMap.Size(16, 31),
imageSize: new BMap.Size(34, 34)
});
marker2 = new BMap.Marker(point2, { icon: iconImg }); //按照地图点坐标生成标记
var opts = {
offset: new BMap.Size(8, 2) // 设置文本偏移量
}
marker2.enableMassClear();
//设置地图上的文本标注
var numLabel2 = new BMap.Label("始", opts);
numLabel2.setStyle({ //设置文本标注的样式
color: "white", //字体颜色
fontSize: "16px",//字体大小
backgroundColor: "0.05", //文本标注背景颜色
border: "0",
fontWeight: "bold" //字体加粗
});
marker2.setLabel(numLabel2); //将文本标注添加到覆盖物中
map.addOverlay(marker2);//将覆盖物添加到地图中
var walking = new BMap.WalkingRoute(map);//创建一个用于步行规划的实例
walking.search(point1,point2);//创建步行搜索
//添加回调方法,绘制路线
walking.setSearchCompleteCallback(function(){ //设置检索后的回调函数
var pts = walking.getResults().getPlan(0).getRoute(0).getPath();
//getResults() 返回最近一次检索的结果
//getPlan(0) 返回索引指定的方案,索引0表示第一条方案
//getRoute(0) 返回方案中索引指定的线路。索引0表示第一条线路
//getPath() Route中的返回路线的地理坐标点数组
var polyline = new BMap.Polyline(pts,{strokeColor:"green", strokeWeight:5, strokeOpacity:0.5,strokeStyle:"dashed"});
map.addOverlay(polyline);
})
var pointArray =new Array(point1,point2);
map.setViewport(pointArray); //调整最佳视野
console.log(pointArray);
})
$(".amap-zoom-touch-plus").on("click",function(){ //放大地图
map.zoomIn();
})
$(".amap-zoom-touch-minus").on("click",function(){ //缩小地图
map.zoomOut();
})
$(".screen-content").on("click",".option",function(){
$(this).find(".option-img").toggle(0);
$(".eliminate").show(0);
})
$(".eliminate").on("click",function(){
$(".option-img").hide(0);
})
$(".screen-confirm").on("click",function(){
console.log($(".option-img"))
for(let i=0;i<$(".option-img").length;i++){
if($($(".option-img")[i]).css("display")=='inline'){
let keyStr = $($(".option-img")[i]).prev().text();
console.log(keyStr);
}
}
})
})
})(jQuery);
html页面源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ORjzGWwPCNqA4NzwgEleIZOIjmSOuTxb">
</script>
<script src="../../plugins/jquery-3.3.1.js"></script>
<link rel="stylesheet/less" type="text/css" href="../../less/base/base.less">
<link rel="stylesheet" href="../../plugins/bootstrap.css">
<link rel="stylesheet" href="../../iconfont/iconfont.css">
<link rel="stylesheet" href="../../less/map/map.css">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="app container-fluid">
<nav class="star-nav row ">
<ul class="hidden-xs">
<li><a href="../../index.html"><img src="../../images/logo/img.png" alt="LOGO"> </a></li>
<li><a href="">门店</a></li>
<li><a href="../../html/account/login.html">我的账户</a></li>
<li><a href="../../html/menu/menu.html">菜单</a></li>
<li><a class="iconfont icon-home_shousuo_h_icon pop-up-btn"></a></li>
</ul>
<div class="row address" style="display:none">
<div class="navbar col-sm-12 col-xs-12">
<div class="bavbar-input row">
<div class="field search col-sm-8 col-sm-offset-1 col-xs-8 col-xs-offset-1">
<input type="text" placeholder="输入地址查找门店" value="">
<img src="../../images/map/icon-search.svg" class="field-search">
</div>
<a class="filters col-sm-3 col-xs-3">
<span>筛选</span>
</a>
</div>
</div>
</div>
<div id="map" class=" visible-xs" style="height:300px;">
<iframe src="./map-sub.html" frameborder="0" height="300px" width="100%"></iframe>
</div>
<dl class="list shop-list">
<!-- <dt>
<img src="../../images/map/icon-info-green.svg" class="first-top">
雅安万达广场店
<small>
雅安市 雅安市雨城区熊猫大道66号万达广场
</small>
<span class="distance">112.7 Km</span>
<div class="number">
<span>1</span>
<img src="../../images/map/icon-pin-solid-green.svg" alt="">
</div>
</dt> -->
</dl>
<!-- 店铺的详情信息 -->
<div class="details" style="display:none;">
<header class="header">
<img src="../../images/map/icon-close.svg">
</header>
<section class="body">
<div class="store-details">
<h2>成都益州国际广场店</h2>
<div class="adr"><span class="locality">天府新区 888号 益州大道南段 </span>
<span class="postal-code">成都市 610000</span>
</div>
<a class="phone">
<img src="../../images/map/icon-contact.svg">
<span class="phone-tel">028-62632718</span>
</a>
<a id="store-directions-1017953" class="directions">
<img src="../../images/map/icon-directions.svg"><span class="route">获取路线</span></a>
<span class="route-point" style="display:none"></span>
</div>
<h3 class="caption"><span>营业时间</span></h3>
<div class="hours clearfix">
<div class="clearfix" span class="day">星期一</span>
<span class="hours">07:00上午至22:00下午</span>
</div>
<div class="clearfix" span class="day">星期二</span>
<span class="hours">07:30上午至22:00下午</span>
</div>
<div class="clearfix"><span class="day">星期三</span>
<span class="hours">06:30上午至22:00下午</span>
</div>
<div class="clearfix"><span class="day">星期四</span>
<span class="hours">08:30上午至23:00下午</span>
</div>
<div class="clearfix"><span class="day">星期五</span>
<span class="hours">07:30上午至21:00下午</span>
</div>
<div class="clearfix"><span class="day">星期六</span>
<span class="hours">07:30上午至22:00下午</span>
</div>
<div class="clearfix"><span class="day">星期天</span>
<span class="hours">06:30上午至23:00下午</span>
</div>
</div>
<h3 class="caption"><span>门店特色</span></h3>
<div class="amenities">
<div><img src="../../images/map/牛奶.svg"><span>专星送™</span></div>
<div><img src="../../images/map/汉堡.svg"><span>Origami™便携式滴滤咖啡</span></div>
</div>
</section>
</div>
</nav>
<!--左边弹窗--->
<div class="pop-up hidden-xs">
<div class="star-nav row">
<div class="row pop-up-header">
<span class="pop-up-btn2">×</span>
<img src="../../images/logo/img.png" alt="LOGO" class="img-logo">
<div class="col-md-9 col-md-push-2 col-box">
<div class="col-md-12">
<a href="../../html/map/map.html">门店</a>
</div>
<div class="col-md-12">
<a href="../../html/account/login.html">我的账户</a>
</div>
<div class="col-md-12 caidan">
<a href="../../html/menu/menu.html">菜单</a>
</div>
<div class="col-md-12">
<a href="">咖啡一号店臻选</a>
</div>
<div class="col-md-12">
<a href="../../html/account/login.html" class="denglu">登录</a>
<a href="../../html/account/register.html" class="zhuce">注册</a>
</div>
</div>
</div>
</div>
</div>
<main class="star-content row hidden-xs">
<div class="map">
<!-- 加载地图的div -->
<div id="l-map" class="col-sm-12 col-xs-12 col-md-12 computer-side-map">
</div>
<!-- 加载地图中的自定义的插件 -->
<div class="Plug-in">
<div class="amap-touch-toolbar">
<div class="amap-zoom-touch-plus">+</div>
<div class="amap-zoom-touch-minus">−</div>
</div>
<div class="MapTooltip">
<span>放大缩小地图来查看更多门店</span>
<div class="MapTooltip-horn"></div>
</div>
</div>
</div>
</main>
</div>
<script src="../../plugins/less.js"></script>
<script src="../../plugins/bootstrap.js"></script>
<script src="../../js/map-js/map.js"></script>
<script src="../../js/base-js/base.js"></script>
</body>
</html>