宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取

高德LBS开放平台地址    http://lbs.amap.com/api/javascript-api/guide/create-map/mapstye

概述->示例中心Demo体验->开发指南->参考手册

1.概述:JS-API功能介绍

2.示例中心:Demos

3.开发指南:可以快速找到使用方法

4.参考手册:全方面了解API,深入使用JS-API

开发体验:

引入JS-API的外部脚本

tips:最好放在dom底部,先渲染DOM树,再加载脚本,可以提高视觉体验

Map类:

1.设置城市(setCity)

2.获取城市的中心点(getCenter)

3.设置缩放级别(setZoom)&获取当前级别(getZoom)

4.地图放大(zoomIn)&缩小(zoomOut)

5.加载一个插件(plugin)

6.监听地图事件(dragend)

插件的使用

【参考手册-工具类】

document.getElementById("ZoomIn").onclick=function(){
                map.zoomIn();
            }
            document.getElementById("ZoomOut").onclick=function(){
                map.zoomOut();
            }
            //监听事件
            //AMap.event.addListener(map,'dragend',function(){
            //alert("你拽我啦!其实我不生气");
            //});
            //比例尺
            map.plugin(['AMap.Scale'],function(){
                var scale=new AMap.Scale();
                map.addControl(scale);
            });
            //可切换街景及路况
            map.plugin(['AMap.MapType'],function(){
                var type=new AMap.MapType();
                map.addControl(type);
            });
            //鹰眼
            map.plugin(['AMap.OverView'],function(){
                var view=new AMap.OverView();
                overview.open();
                map.addControl(view);
            });
            //工具箱
            map.plugin(['AMap.ToolBar'],function(){
                var bar=new AMap.ToolBar();
                map.addControl(bar);
            });
            
//面积量算 map.plugin(['AMap.MouseTool'],function(){ var tool=new AMap.MouseTool(map); //map.addControl(tool); tool.measureArea(); }); //距离量算 map.plugin(['AMap.RangingTool'],function(){ var rang=new AMap.RangingTool(map); // map.addControl(tool); rang.turnOn(); });

地图覆盖物:

【参考手册-覆盖物】

点标记:Marker

折线:Polyline

多边形:Polygon

圆:Circle

图片覆盖物:GroundImage

信息窗体:InfoWindow