使用高德JS-API进行基于LBS的开发-地图初始化&地图控件

最新推荐文章于 2024-09-02 14:32:24 发布

本然233

最新推荐文章于 2024-09-02 14:32:24 发布

阅读量896

点赞数 1

分类专栏： Web开发文章标签： html 高德JS-API LBS开发

本文链接：https://blog.csdn.net/qq_35008279/article/details/79149165

版权

Web开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

框架代码:

<!DOCTYPE html>
<html style="width:100%;height:100%;">
<head>
    <meta charset="utf-8">
    <title>简单Demo</title>
</head>
<body style="width:100%;height:100%;margin:0;">
    <div id="map" style="width:100%;height:100%;"></div>
    <script type="text/javascript"src="http://webapi.amap.com/maps?v=1.4.3&key=7d3d82555540970d7f65b871e2e40ddc"></script>
    <script type="text/javascript">
        (function(){
            var map = new AMap.Map('map');
            map.setCity("桂林市");
            console.log(map.getCenter());   
            map.setZoom(18);
            console.log(map.getZoom());
    </script>
</body>
</html>

添加按钮

<div id="zoomin" style="position: absolute;left: 10px;bottom: 120px;width: 60px;height: 40px;z-index: 160;background-color: #008CFF;color: #FFF;border-radius: 3px;line-height: 40px;text-align: center;cursor: pointer;">放大</div>
<div id="zoomout" style="position: absolute;left: 10px;bottom: 60px;width: 60px;height: 40px;z-index: 160;background-color: #008CFF;color: #FFF;border-radius: 3px;line-height: 40px;text-align: center;cursor: pointer;">缩小</div>

按钮事件

document.getElementById("zoomin").onclick = function(){
                map.zoomIn();
            };
document.getElementById("zoomout").onclick = function(){
                map.zoomOut();
            };

添加监听事件

AMap.event.addListener(map,'dragend',function(){
                alert("拖拽监听……");
            });

引入控件

            /*
             * 增加地图控件
             * 1.实例化控件
             * 2.通过map.addControl添加控件
             */
            //地图比例尺AMap.scale
            map.plugin(['AMap.Scale'],function(){
                var scale = new AMap.Scale();
                map.addControl(scale);
            });
            //地图类型切换AMap.MapType
            map.plugin(['AMap.MapType'],function(){
                var type = new AMap.MapType();
                map.addControl(type);
            });
            //鹰眼控件AMap.OverView
            map.plugin(['AMap.OverView'],function(){
                var view = new AMap.OverView();
                view.open();//默认false，调用open方法显示
                map.addControl(view);
            });
            //工具条AMap.ToolBar
            map.plugin(['AMap.ToolBar'],function(){
                var bar = new AMap.ToolBar();
                map.addControl(bar);
            });

插件

            //插件
            //鼠标工具AMap.MouseTool
            map.plugin(['AMap.MouseTool'],function(){
                var tool = new AMap.MouseTool(map);
                tool.measureArea();
            });
            //距离量算AMap.RangingTool
            map.plugin(['AMap.RangingTool'],function(){
                var tool = new AMap.RangingTool(map);
                tool.turnOn();
            });