Use of Amap WEB version-HTML Tutorial-php.cn

I recently learned how to use the web version of the Amap map, and summarized the application of the basic controls of Amap. The Amap map is open source and editable. The method is not difficult. Friends who are interested can try to edit it by themselves. .

I wanted to make a travel navigation project by myself before. I searched the Internet and found the AMAP open platform. I found that Amap can be easily applied to my own project, so I applied immediately. Let’s learn a key and study it carefully. I think it’s quite difficult. I searched online for cases and so on. After these few days, the editor has almost done some basic controls of Amap. The renderings are as shown below. Display:

The following is the js code:

//引入高德地图API 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.homeControlp = function(){} AMap.homeControlp.prototype = { addTo: function(map, dom){ dom.appendChild(this._getHtmlDom(map)); }, _getHtmlDom:function(map){ this.map=map; // 创建一个能承载控件的 容器 controlUI = document.createElement("p"); controlUI.style.width='80px'; //设置控件容器的宽度 controlUI.style.height='20px'; //设置控件容器的高度 controlUI.style.backgroundColor='white'; controlUI.style.borderStyle='solid'; controlUI.style.borderWidth='2px'; controlUI.style.cursor='pointer'; controlUI.style.textAlign='center'; // 设置控件的位置 controlUI.style.position='absolute'; controlUI.style.left='120px'; //设置控件离地图的左边界的偏移量 controlUI.style.top='5px'; //设置控件离地图上边界的偏移量 controlUI.style.zIndex='300'; //设置控件在地图上显示 // 设置控件字体样式 controlUI.style.fontFamily='Arial,sens-serif'; controlUI.style.fontSize='12px'; controlUI.style.paddingLeft='4px'; controlUI.style.paddingRight='4px'; controlUI.innerHTML="换中心点"; // 设置控件响应点击onclick事件 controlUI.onclick = function(){ map.setCenter(new AMap.LngLat(116.234404, 39.12915)); } return controlUI; } } AMap.event.trigger(homeControlp,"hide"); AMap.event.addListener(homeControlp,"hide",function(){ controlUI.style.display = 'none'; }) function myControl(){ homeControl = new AMap.homeControlp(mapObj); //新建自定义插件对象 mapObj.addControl(homeControl); //地图上添加插件 } function removeMyControl(){ homeControl.hide(); //controlUI.style.display='none'; } function iRangingTool(){ ruler.turnOn(); } function removeRangingTool(){ ruler.turnOff(); mapObj.clearMap(); //ruler.hide(); //ruler.setMap(null); //mapObj.removeControl(ruler); } function iMarker(){ mousetool.marker(); //使用鼠标工具，在地图上画标记点 } function iMeasureArea(){ mousetool.measureArea(); } function iRectZoomIn(){ mousetool.rectZoomIn(); } function iRectZoomOut(){ mousetool.rectZoomOut(); } function iPolyline(){ mousetool.polyline(); } function iPolygon(){ mousetool.polygon(); } function iCircle(){ mousetool.circle(); } function iRectangle(){ mousetool.rectangle(); } function iRule(){ mousetool.rule(); } function removeMouseTool(){ mousetool.close(true); } function geocoder() { var MGeocoder; //加载地理编码插件 mapObj.plugin(["AMap.Geocoder"], function() { MGeocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" }); //返回地理编码结果 AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack); //逆地理编码 MGeocoder.getAddress(lnglatXY); }); //加点 var marker = new AMap.Marker({ map:mapObj, icon: new AMap.Icon({ image: "http://api.amap.com/Public/images/js/mark.png", size:new AMap.Size(58,30), imageOffset: new AMap.Pixel(-32, -0) }), position: lnglatXY, offset: new AMap.Pixel(-5,-30) }); // mapObj.setFitView(); } //回调函数 function geocoder_CallBack(data) { var address; //返回地址描述 address = data.regeocode.formattedAddress; //返回结果拼接输出 document.getElementById("iAddress").innerHTML = address; } //鼠标点击，获取经纬度坐标 function getLnglat(e){ mapObj.clearMap(); var x = e.lnglat.getLng(); var y = e.lnglat.getLat(); document.getElementById("lnglat").innerHTML = x + "," + y; lnglatXY = new AMap.LngLat(x,y); geocoder(); } Copy after login

The following is the HTML code:

显示完整鱼骨 隐藏鱼骨 方向盘 长标尺 短标尺 显示比例尺 隐藏比例尺 显示鹰眼 隐藏鹰眼 添加地图类型切换 移除地图类型切换 添加圆形编辑器 删除圆形编辑器 添加多边形编辑器 删除多边形编辑器 鼠标打点工具 清除 鼠标画折线工具 清除 鼠标画多边形工具 清除 鼠标画圆形工具 清除 鼠标画矩形工具 清除 鼠标测距工具 清除 鼠标测面积 移除 鼠标框选缩小 鼠标框选放大 关闭鼠标放大缩小 测距插件 隐藏测距 添加自定义控件 移除自定义控件

坐标拾取控件 取消坐标拾取

Copy after login

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

php HTML Methods and examples of submitting forms without refreshing

HTML Summary of methods of embedding JS in documents

jQuery implementation HTML Fuzzy matching query for page text box (with code)

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Use of Amap WEB version