小编给大家分享一下高德地图WEB版怎么用,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
之前想自己做一个旅游导航的项目,在网上一搜发现了高德地图开放平台,发现原来高德可以很简单的就应用到自己的项目里面,当即我就申请了一个键来学一学,仔细研究了一下,感觉还挺难的,网上找了找案例什么的,经过这几天,小编把高德的一些基础控件差不多弄了一下,效果图如下图所示:
& lt; script 语言=癶ttps://www.yisu.com/zixun/javascript", src=" http://webapi.amap.com/maps?v=1.2&key=3c5ca12a5778fde874e9959c7fbdf516 ">//引入高德地图API脚本
<脚本语言=" javascript ">
var mapObj;
var规模;
var mapType;
var工具栏;
var概述;
var circleEditor;
var圈子;
var polygonEditor;
var多边形;
var homeControl;
var controlUI;
var统治者;
var mousetool;//刷新页面
函数重载(){
location.reload ();
}
函数mapInit () {
mapObj=new AMap.Map (“iCenter”{
中心:新AMap.LngLat(116.397728, 39.90423),//地图中心点//水平:13日地图显示的比例尺级别
});
mapObj.plugin ((“AMap.ToolBar”),函数(){//在地图中添加工具栏插件
工具栏=new AMap.ToolBar ();
mapObj.addControl(工具栏);
});
mapObj.plugin ((“AMap.Scale”),函数(){//加载比例尺插件
规模=new AMap.Scale ();
mapObj.addControl(规模);
scale.show ();
});
mapObj.plugin ((“AMap.OverView”),函数(){//在地图中添加鹰眼插件//加载鹰眼
概述=new AMap.OverView ({
可见:真//初始化显示鹰眼
});
mapObj.addControl(概述);
overView.open ();//展开鹰眼
});
mapObj.plugin ((“AMap.RangingTool”),函数(){
统治者=new AMap.RangingTool (mapObj);
AMap.event.addListener(统治者,“结束”,函数(e) {
ruler.turnOff ();
});
});
mapObj.plugin ((“AMap.MouseTool”),函数(){//鼠标工具插件
mousetool=new AMap.MouseTool (mapObj);
});
}
函数坐标(){
AMap.event.addListener (mapObj”,单击“getLnglat);//点击事件
}
函数toolBarShow () {
toolBar.show ();
toolBar.showRuler ();
toolBar.showDirection ();
}
函数toolBarDirection () {
toolBar.show ();
toolBar.showDirection ();
toolBar.hideRuler ();
}
函数toolBarLong () {
toolBar.show ();
toolBar.hideDirection ();
toolBar.showRuler ();
}
函数toolBarShot () {
toolBar.show ();
toolBar.hideRuler ();
toolBar.hideDirection ();
}
函数iMapType () {
mapObj.plugin ((“AMap.MapType”),函数(){//添加地图类型切换插件//地图类型切换
mapType=new AMap.MapType ({defaultType: 1、showRoad:真});
mapObj.addControl (mapType);
});
}
函数removeMapType () {
mapObj.removeControl (mapType);
}
函数iCircleEditor(){//圆形编辑器
圆=new同理。圆({//圆形编辑器的样式
地图:mapObj,
中心:新AMap.LngLat (“116.40332221984863”、“39.90025505675715”),
半径:1000,
strokeColor:“# F33”,
strokeOpacity: 1、
strokeWeight: 3,
fillColor:“ee2200”,
fillOpacity: 0.35
});
mapObj.plugin ((“AMap.CircleEditor”),函数(){
circleEditor=new AMap.CircleEditor (mapObj、圆);//创建圆形编辑器对象
circleEditor.open ();//打开圆形编辑器
});
}
函数removeCicleEditor(){//关闭圆形编辑器,隐藏圆形
circleEditor.close ();
circle.hide ();
}
函数iPloygonEditor(){//编辑多边形
var arr=new Array();//经纬度坐标数组
加勒比海盗。推动(新AMap.LngLat (“116.403322”、“39.920255”));
加勒比海盗。推动(新AMap.LngLat (“116.410703”、“39.897555”));
加勒比海盗。推动(新AMap.LngLat (“116.402292”、“39.892353”));
加勒比海盗。推动(新AMap.LngLat (“116.389846”、“39.891365”));
多边形=new AMap.Polygon ({
路径:加勒比海盗,//设置多边形轮廓的节点数组
strokeColor:“# 0000 ff”,
strokeOpacity: 0.2,
strokeWeight: 3,
fillColor:“# f5deb3”,
fillOpacity: 0.35
});//地图上添加多边形
mapObj.addOverlays(多边形);//构造多边形编辑对象,并开启多边形的编辑状态
mapObj.plugin ((“AMap.PolyEditor”),函数(){
polygonEditor=new AMap.PolyEditor (mapObj、多边形);
polygonEditor.open ();
});
}
函数removePloygonEditor () {
polygonEditor.close ();
polygon.hide ();
}
同理。homeControlp=function () {}
AMap.homeControlp。原型={
遭受:函数(地图,dom) {
dom.appendChild (this._getHtmlDom(地图));
},
_getHtmlDom:函数(地图){
this.map=地图;//创建一个能承载控件的
