jquery地图API功能，自制插件

平时我们在看一些公司网页的时候，会有一个单独显示的公司地址地图。
这个可以简单的实现
效果图：

css 代码：

/*地图*/

.map {
    width: 100%;
    height: 555px;
}

.BMap_cpyCtrl {
    display: none;
}

.anchorBL img {
    display: none;
}

.infoBoxContent {
    width: 310px;
    height: 120px;
    background: rgba(7, 21, 221, 0.75);
    border-radius: 12px;
    margin-left: 40px;
    margin-top: -48px;
}

.infoBoxContent:before {
    content: '';
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: rgba(7, 21, 221, 0.75);
    position: absolute;
    margin-left: -20px;
    margin-top: 50px;
}

.title {
    width: 290px;
    line-height: 40px;
    margin: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    ;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
}

.title img {
    width: 45px;
    height: 17px;
}

.title span {
    margin-left: 10px;
}

.list {
    width: 290px;
    font-size: 10px;
    margin: auto;
    height: 35px;
    position: relative;
    margin-top: 10px;
}

.list img {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
}

.list p {
    margin-left: 20px;
    font-size: 10px;
    color: rgba(255, 255, 255, 1);
    line-height: 15px;
}

.lists {
    width: 290px;
    font-size: 10px;
    color: white;
}

.lists1 {
    width: 40%;
    line-height: 16px;
    float: left;
    margin-left: 10px;
    position: relative;
}

.lists1 img {
    position: absolute;
    width: 15px;
    height: 15px;
}

.lists1 span {
    margin-left: 20px;
}

.lists2 {
    width: 40%;
    line-height: 16px;
    float: right;
    margin-right: 0px;
}

.lists2 img {
    position: absolute;
    margin-left: -20px;
    width: 15px;
    height: 15px;
}

html+js包 代码：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=2aKMfvwBpC3LXg4lU8544xkppFfpfsuz&s=1"></script>
<div class="content">
    <div class="bigbox" >
        <!--地址地图   高890px 刚好一个页面大小![在这里插入图片描述](https://img-blog.csdnimg.cn/20191106153508202.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzc3MzE1,size_16,color_FFFFFF,t_70)-->
        <div id="allmap" class="map" style="height:890px"></div>
    </div>
</div>

js 代码：
此 js 代码是标记城市位置
代码位置要放在html代码下面，

<script>
    // 百度地图API功能
	/*潍坊*/
	//定义一个  下面可以多个城市 使用
	var map = new BMap.Map("allmap");
	//可以百度城市精确位置 添上
    var weifang = new BMap.Point(119.1617600000,36.7068600000);
    map.centerAndZoom(weifang, 8);
    var markerwf = new BMap.Marker(weifang);// 创建标注
    map.addOverlay(markerwf); // 将标注添加到地图中
    map.enableScrollWheelZoom(true); //开启鼠标滚动放大缩小
	/*青岛*/
    var qingdao = new BMap.Point(120.3829900000,36.0662300000);
    map.centerAndZoom(qingdao, 8);
    var markerqd = new BMap.Marker(qingdao);
    map.addOverlay(markerqd); 
    map.enableScrollWheelZoom(true); 
    /*济南*/
    var jinan = new BMap.Point(117.147944,36.670163);
    map.centerAndZoom(jinan, 8);
    var markerjn = new BMap.Marker(jinan);
    map.addOverlay(markerjn); 
    map.enableScrollWheelZoom(true); 
</script>