页面加载百度地图

最新推荐文章于 2023-03-11 00:14:45 发布

原创最新推荐文章于 2023-03-11 00:14:45 发布 · 323 阅读

1 ·

CC 4.0 BY-SA版权

.net 同时被 3 个专栏收录

27 篇文章

订阅专栏

代码

26 篇文章

订阅专栏

Jquery

11 篇文章

订阅专栏

这段HTML代码展示了如何在网页中加载百度地图。通过JavaScript函数`initialize`，创建了一个地图实例并设置了初始坐标，同时启用了鼠标滚轮缩放功能。地图控件包括导航控制、缩放地图控制和类型控制。地图加载依赖于外部脚本`http://api.map.baidu.com/api?v=1.2&callback=initialize`，该脚本在页面加载完成后被插入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        html{ height: 100%;}
        body{ height: 100%; margin: 0px; padding: 0px; }
        #container { height: 100%; }

    </style>

    <script type="text/javascript">

        function initialize() {
            var mp = new BMap.Map('map');
            mp.centerAndZoom(new BMap.Point(114.31667, 30.51667), 13);//对应的坐标
            //mp.addControl(new BMap.ScaleControl());
            mp.enableScrollWheelZoom();
            //var opts = { type: BMAP_NAVIGATION_CONTROL_SMALL }
            //mp.addControl(new BMap.NavigationControl(opts));

            mp.addControl(new BMap.NavigationControl());
            mp.addControl(new BMap.OverviewMapControl());
            mp.addControl(new BMap.MapTypeControl());
        }
        function loadScript() {
            var script = document.createElement("script");
            script.src = "http://api.map.baidu.com/api?v=1.2&callback=initialize";
            document.body.appendChild(script);
        } window.onload = loadScript;
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
    </div>
    <div id="map" style=" width:100%; height:600px;"></div> 
    </form>
</body>
</html>