自定义js插件引入百度地图

学习使用基本百度地图链接：https://blog.csdn.net/qq_36657997/article/details/81704356

公司业务需要，需要在页面的局部加上地图，

由于公司所有的页面都是由js插件组成，而在插件中使用dom定义的div ，无法实例化地图。

var mapDiv = document.createElement("DIV");
mapDiv.id = "allmap";

原因可能是，百度地图的加载，需要页面其他内容全部加载完毕后，才加载百度图。

思考一段时间后，决定使用iframe标签，来局部加载地图。

1、编写一个map.html，加载地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- baidu map -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
</head>
<body>
<div id = "allmap"></div>
</body>
</html>
<script type="text/javascript">

    //百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(120.378386,30.309756),15);//根据坐标初始化地图
     map.enableScrollWheelZoom(true);
    map.addControl(new BMap.NavigationControl());   //平移缩放控件
    map.addControl(new BMap.ScaleControl());        //比例尺
    map.addControl(new BMap.OverviewMapControl());  //缩略地图
    map.addControl(new BMap.MapTypeControl());      //地图类型
    map.setCurrentCity("杭州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

    //添加标注
    var marker = new BMap.Marker(new BMap.Point(120.378386,30.309756));        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中
</script>

2.使用iframe标签，地址为刚刚创建的地图页面的地址

var mapDiv = document.createElement("DIV");
mapDiv.id = "allmap";
mapDiv.style.marginTop = "50px";
mapDiv.innerHTML = "<iframe width=\"1100\" height=\"743\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http://localhost:8080/xq-ese-pc/map.html\"></iframe>";

至此，页面可以局部显示地图。效果如下

自定义js插件引入百度地图

思考一段时间后，决定使用iframe标签，来局部加载地图。

猜你喜欢