在网页中，通过JavaScript引入百度地图

Author：孙肖宁
发布时间：January 9, 2018
7507 views
No comments
973 words
Categories：编程语言

为了提高网页的整体效果，在网页中往往需要，通过JavaScript引入百度地图，小编在这里整理了一下，希望可以帮到大家。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入百度地图</title>
    <!-- 引入百度地图 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
      <div id="contactinformation">
   <!--地图-->
            <div id="mapCanvas" class="map-canvas no-margin" style="height: 450px; width: 450px">
            <script type="text/javascript">
                var map = new BMap.Map("mapCanvas"); // 创建Map实例
                var point = new BMap.Point("116.3119450000", "39.9891970000"); // 创建点坐标
                map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。
                map.enableScrollWheelZoom(); //启用滚轮放大缩小
                //添加缩放控件
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
                map.addControl(new BMap.OverviewMapControl());

                var marker = new BMap.Marker(point); // 创建标注
                map.addOverlay(marker); // 将标注添加到地图中
                var infoWindow = new BMap.InfoWindow("小宁博客<br/><span class=''>小宁博客</span>"); // 创建信息窗口对象
                marker.openInfoWindow(infoWindow);
            </script>
        </div>
        <!--地图-->

        </div>
</body>
</html>

Last modification：February 22, 2018