孙肖宁

在网页中,通过JavaScript引入百度地图
为了提高网页的整体效果,在网页中往往需要,通过JavaScript引入百度地图,小编在这里整理了一下,希望可以帮到...
扫描右侧二维码阅读全文
09
2018/01

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

为了提高网页的整体效果,在网页中往往需要,通过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 22nd, 2018 at 10:48 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment