html页面嵌入高德地图,高德地图WEB版基础控件展示

之前想自己做一个旅游导航的项目，在网上一搜发现了高德地图开放平台，发现原来高德可以很简单的就应用到自己的项目里面，当即我就申请了一个key来学一学，仔细研究了一下，感觉还挺难的，网上找了找案例什么的，经过这几天，小编把高德的一些基础控件差不多弄了一下，效果图如下图所示：

废话不多说，直接上源码，下面是js代码：

var mapObj;

var scale;

var mapType;

var toolBar;

var overView;

var circleEditor;

var circle;

var polygonEditor;

var polygon;

var homeControl;

var controlUI;

var ruler;

var mousetool;

//刷新页面

function reload(){

location.reload();

}

function mapInit(){

mapObj = new AMap.Map("iCenter",{

center:new AMap.LngLat(116.397728,39.90423), //地图中心点

level:13, //地图显示的比例尺级别

});

mapObj.plugin(["AMap.ToolBar"],function(){ //在地图中添加ToolBar插件

toolBar = new AMap.ToolBar();

mapObj.addControl(toolBar);

});

mapObj.plugin(["AMap.Scale"],function(){ //加载比例尺插件

scale = new AMap.Scale();

mapObj.addControl(scale);

scale.show();

});

mapObj.plugin(["AMap.OverView"],function(){ //在地图中添加鹰眼插件

//加载鹰眼

overView = new AMap.OverView({

visible:true //初始化显示鹰眼

});

mapObj.addControl(overView);

overView.open(); //展开鹰眼

});

mapObj.plugin(["AMap.RangingTool"],function(){

ruler = new AMap.RangingTool(mapObj);

AMap.event.addListener(ruler,"end",function(e){

ruler.turnOff();

});

});

mapObj.plugin(["AMap.MouseTool"],function(){ //鼠标工具插件

mousetool = new AMap.MouseTo