标题: HTML5高德地图基本页模板

作者: dnawo

日期: 2022-04-05 00:19 AM

分类: 其他

内容:
复制内容到剪贴板程序代码<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>高德地图基本页</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <style type="text/css">
        * {margin:0; padding:0;}
        #container {position:absolute; width:100%; height:100%;}
    </style>
    
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'bf6265ecbc9e4ebff9c297369b9b106d',
        }
    </script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=f016c324446cdc91ea3297560d1d5925&plugin=AMap.ControlBar,AMap.ToolBar,AMap.Scale,AMap.HawkEye,AMap.MapType,AMap.Geolocation" type="text/javascript"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
        var map = new AMap.Map('container');
        map.setZoomAndCenter(11, [120.149177,30.255714]);
        //同步方式加载控件(url需添加plugin参数)
        map.addControl(new AMap.ControlBar({position:{top:'10px',left:'10px'}}));
        map.addControl(new AMap.ToolBar({position:{top:'110px',left:'40px'}}));
        map.addControl(new AMap.Scale());
        map.addControl(new AMap.HawkEye({isOpen:false}));
        map.addControl(new AMap.MapType());
        map.addControl(new AMap.Geolocation({position:{bottom:'40px',left:'10px'}}));
        //异步方式加载控件(url无需添加plugin参数)
        // AMap.plugin(['AMap.ControlBar','AMap.ToolBar','AMap.Scale','AMap.HawkEye','AMap.MapType','AMap.Geolocation'],
        //     function(){
        //         map.addControl(new AMap.ControlBar({position:{top:'10px',left:'10px'}}));
        //         map.addControl(new AMap.ToolBar({position:{top:'110px',left:'40px'}}));
        //         map.addControl(new AMap.Scale());
        //         map.addControl(new AMap.HawkEye({isOpen:false}));
        //         map.addControl(new AMap.MapType());
        //         map.addControl(new AMap.Geolocation({position:{bottom:'40px',left:'10px'}}));
        //     }
        // );
    </script>
</body>
</html>
说明：高德地图安全密钥和key需到开放平台申请并替换成自己的才能正常使用。
相关链接
[1].高德地图开放平台：https://lbs.amap.com/

+ 查看当前日志评论 (0)

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.641 ms

标题: HTML5高德地图基本页模板

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.641 ms

暂无评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.641 ms