J'ai récemment appris à utiliser la version Web d'Amap et j'ai résumé l'application des contrôles de base dans Amap. Amap est open source et modifiable. Les amis intéressés peuvent essayer de le modifier par eux-mêmes. >
Je voulais réaliser moi-même un projet de navigation de voyage et j'ai trouvé la plateforme ouverte AMAP grâce à une recherche en ligne. J'ai découvert qu'Amap pouvait être facilement appliqué à mon propre projet, alors j'ai postulé immédiatement avec un. clé. Après l'avoir étudié attentivement, j'ai trouvé cela assez difficile. J'ai recherché des cas en ligne et ainsi de suite. Après ces quelques jours, l'éditeur a presque effectué quelques contrôles de base d'Amap. Les rendus sont les suivants :
.
Ce qui suit est le code js :
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=3c5ca12a5778fde874e9959c7fbdf516">//引入高德地图API</script>
<script language="javascript">
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;
// 创建一个能承载控件的<p>容器
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();
}
</script>Copier après la connexion
Ce qui suit est le code HTML :
<body onLoad="mapInit()">
<p id="iCenter"></p>
<p id="iControlbox">
<ul>
<li><button onclick="javascript:toolBarShow();">显示完整鱼骨</button><button onclick="javascript:toolBar.hide();">隐藏鱼骨</button><button onclick="javascript:toolBarDirection();">方向盘</button><button onclick="javascript:toolBarLong();">长标尺</button><button onclick="javascript:toolBarShot();">短标尺</button></li>
<li><button onclick="javascript:scale.show();">显示比例尺</button><button onclick="javascript:scale.hide();">隐藏比例尺</button></li>
<li><button onclick="javascript:overView.show();">显示鹰眼</button><button onclick="javascript:overView.hide();">隐藏鹰眼</button></li>
<li><button onclick="javascript:iMapType();">添加地图类型切换</button><button onclick="javascript:removeMapType();">移除地图类型切换</button></li>
<li><button onclick="javascript:iCircleEditor();">添加圆形编辑器</button><button onclick="javascript:removeCicleEditor();">删除圆形编辑器</button></li>
<li><button onclick="javascript:iPloygonEditor();">添加多边形编辑器</button><button onclick="javascript:removePloygonEditor();">删除多边形编辑器</button></li>
<li><button onclick="javascript:iMarker();">鼠标打点工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>
<li><button onclick="javascript:iPolyline();">鼠标画折线工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>
<li><button onclick="javascript:iPolygon();">鼠标画多边形工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>
<li><button onclick="javascript:iCircle();">鼠标画圆形工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>
<li><button onclick="javascript:iRectangle();">鼠标画矩形工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>
<li><button onclick="javascript:iRule();">鼠标测距工具</button><button onclick="javascript:removeMouseTool();">清除</button></li>
<li><button onclick="javascript:iMeasureArea();">鼠标测面积</button><button onclick="javascript:removeMouseTool();">移除</button></li>
<li><button onclick="javascript:iRectZoomIn();">鼠标框选缩小</button><button onclick="javascript:iRectZoomOut();">鼠标框选放大</button><button onclick="javascript:removeRangingTool();">关闭鼠标放大缩小</button></li>
<li><button onclick="javascript:iRangingTool();">测距插件</button><button onclick="javascript:removeRangingTool();">隐藏测距</button></li>
<li><button onclick="javascript:myControl();">添加自定义控件</button><button onclick="javascript:removeMyControl();">移除自定义控件</button></li>
<li><p class="detail"><p><span id="lnglat"> </span></p><p><span id="iAddress"> </span></p></p></li>
<li><button onclick="javascript:Coordinate();">坐标拾取控件</button><button onclick="javascript:reload();">取消坐标拾取</button></li>
</ul>
</p>
</body>
Copier après la connexion
Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.
Recommandations associées :
php HTMLMéthodes et exemples de soumission de formulaires sans actualisation
HTMLRésumé des méthodes d'intégration de JS dans les documents
Implémentation de jQueryHTMLRequête de correspondance floue pour la zone de texte de la page (avec code)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
