JS自定义百度地图气泡框及大头针实践
2019-10-08 本文已影响0人
蜗牛学开车
最近的项目中需要使用地图来展示地址，在地图上放置一个大头针标识地址然后弹出一个气泡框展示文字地址。
像下面这样：
百度默认效果图
但是这个效果太丑了我们UI不满意，我能这么办我也很绝望，只能改了。下面是我们设计期望的效果。
UI期望效果-web
UI期望效果-手机1
UI期望效果-手机2
我发现官方提供的InfoWindow使用起来非常有局限性，能改的东西非常少。
不过百度提供了InfoBox,我们可以使用InfoBox来代替InfoWindow,InfoBox的使用方式官方文档讲的还算比较详细，有兴趣的可以去看看。
不过要使用BMapLib.InfoBox必须要先引入才行，网上找了好久也没有找到如果引入的，不引入就会报错。最终我只能将BMapLib.js的源码放到本地了，你可以去百度官网去copy一份BMapLib源码放到本地。像下面这样：
项目目录
baidumap.html 是源码
BMapLib.js是InfoBox的源码
ic_marker.png是大头针
web_map_close.png是关闭按钮，因为关闭按钮必须要设置在加上设计不需要关闭按钮所以我就用了一个白色的图片代替，这样就看不出有关闭按钮了。
下面是我的所有代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;}
#allmap{width:100%;height:100%;}
.infoBox {
border-radius: 4px;
box-shadow: 4px 4px 4px #cccccc;
}
.infoBoxContent{
margin: 10px;
word-break: keep-all;
}
.infoBoxContent h5{
margin: 0;
}
.infoBoxContent:before {
content: '';
border: 10px solid transparent;
border-top-color: #FFFFFF;
position: absolute;
left: calc(50% + 10px);
top: 100%;
margin-left: -20px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1H8Dhi2pGmOMYbN4EcaAGr1rv8f7Gmjz"></script>
<script type="text/javascript" src="./BMapLib.js"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
function load(){
var myGeo = new BMap.Geocoder();
var address = GetQueryString('address');
myGeo.getPoint(address, function(point){
if (!point) {
point = new BMap.Point(116.403847,39.916500);
}
var map = new BMap.Map("allmap", {enableMapClick:false});
var showMark = GetQueryString('showmark') == "true";
if(showMark){
var myIcon = new BMap.Icon("./ic_marker.png", new BMap.Size(15, 23), {
anchor: new BMap.Size(7, 15)
});
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
}
marker = new BMap.Marker(point);
map.centerAndZoom(point, 15);
var html = "<div class='infoBoxContent '><h5>"+address+"</h5></div>";
var infoBox = new BMapLib.InfoBox(map,html,{
boxStyle:{
opacity: "0.8",
background: "#FFFFFF",
minWidth: "50px",
},
closeIconUrl:"./web_map_close.png",
closeIconMargin: "1px 1px 0 0",
enableAutoPan: true,
align: INFOBOX_AT_TOP
});
marker.addEventListener("click", function(){
if(showMark){
infoBox.open(marker);
}else{
infoBox.open(point);
}
});
if(showMark){
infoBox.open(marker);
}else{
infoBox.open(point);
}
}, "中国");
}
function GetQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return decodeURI(r[2]); return null;
}
load()
</script>
</body>
</html>
一共有两个参数
address:文字地址，例如 address=上海市浦东新区陆家嘴世纪金融广场
showmark:是否显示大头针，例如 showmark=true
希望本篇文章能够帮到你，如果有，记得给好评哟亲。
