之前想自己做一个旅游导航的项目，在网上一搜发现了高德地图开放平台，发现原来高德可以很简单的就应用到自己的项目里面，当即我就申请了一个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.MouseTool(mapObj);

});

}

function Coordinate(){

AMap.event.addListener(mapObj,'click',getLnglat); //点击事件

}

function toolBarShow(){

toolBar.show();

toolBar.showRuler();

toolBar.showDirection();

}

function toolBarDirection(){

toolBar.show();

toolBar.showDirection();

toolBar.hideRuler();

}

function toolBarLong(){

toolBar.show();

toolBar.hideDirection();

toolBar.showRuler();

}

function toolBarShot(){

toolBar.show();

toolBar.hideRuler();

toolBar.hideDirection();

}

function iMapType(){

mapObj.plugin(["AMap.MapType"],function(){ //添加地图类型切换插件

//地图类型切换

mapType= new AMap.MapType({defaultType:1,showRoad:true});

mapObj.addControl(mapType);

});

}

function removeMapType(){

mapObj.removeControl(mapType);

}

function iCircleEditor(){ //圆形编辑器

circle = new AMap.Circle({ //圆形编辑器的样式

map: mapObj,

center:new AMap.LngLat("116.40332221984863","39.90025505675715"),

radius:1000,

strokeColor: "#F33",

strokeOpacity: 1,

strokeWeight: 3,

fillColor: "ee2200",

fillOpacity: 0.35

});

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

circleEditor = new AMap.CircleEditor(mapObj,circle); //创建圆形编辑器对象

circleEditor.open(); //打开圆形编辑器

});

}

function removeCicleEditor(){ //关闭圆形编辑器，隐藏圆形

circleEditor.close();

circle.hide();

}

function iPloygonEditor(){ //编辑多边形

var arr=new Array();//经纬度坐标数组

arr.push(new AMap.LngLat("116.403322","39.920255"));

arr.push(new AMap.LngLat("116.410703","39.897555"));

arr.push(new AMap.LngLat("116.402292","39.892353"));

arr.push(new AMap.LngLat("116.389846","39.891365"));

polygon = new AMap.Polygon({

path:arr, //设置多边形轮廓的节点数组

strokeColor:"#0000ff",

strokeOpacity:0.2,

strokeWeight:3,

fillColor: "#f5deb3",

fillOpacity: 0.35

});

//地图上添加多边形

mapObj.addOverlays(polygon);

//构造多边形编辑对象，并开启多边形的编辑状态

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

polygonEditor = new AMap.PolyEditor(mapObj,polygon);

polygonEditor.open();

});

}

function removePloygonEditor(){

polygonEditor.close();

polygon.hide();

}

AMap.homeControlDiv = function(){}

AMap.homeControlDiv.prototype = {

addTo: function(map, dom){

dom.appendChild(this._getHtmlDom(map));

},

_getHtmlDom:function(map){

this.map=map;

// 创建一个能承载控件的