实现51Map地图接口(示例代码)_javascript技巧
程序员文章站
2022-04-07 14:58:58
...
51Map免费提供了地图接口以下是调用接口并且实现地理位置标注,存储,修改和回显功能。
51地图网址:http://api.51ditu.com/
在地图上标注:
//地图标注
$(document).ready(function(){
var ico=new LTIcon(" ",[24,24],[12,12]);
var map=new LTMaps("mapdiv");//地图对象
var controlB; //标记控件
map.centerAndZoom("tianjin",5);//天津
map.handleMouseScroll();//鼠标滚轮
var controlZoom = new LTStandMapControl();//缩放控件
map.addControl( controlZoom );
controlB = new LTMarkControl();//添加标注控件并把事件绑定到按钮
controlB.setVisible(false);
document.getElementById("addPosition").onclick=function (){controlB.btnClick()};
map.addControl( controlB );
LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
})
//添加标注时执行此函数
function getPoi(controlB){
var poi = controlB.getMarkControlPoint();
$("#x").val(poi.getLongitude()); //x,y为input标签id通过它传入后台储存位置
$("#y").val(poi.getLatitude());
}
在读图上回显标注:
//地图回显
$(document).ready(function(){
map("mapdiv");
})
//地图
function map(div){
var map=new LTMaps(div);//地图对象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//创建标注
map.handleMouseScroll();//鼠标滚轮缩放
map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐标为中心显示地图
map.addOverLay(marker) //添加标注到地图上
}
修改地图上的标注:
//地图回显
$(document).ready(function(){
map("mapdiv");
})
//地图
function map(div){
var map=new LTMaps(div);//地图对象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//创建标注
map.handleMouseScroll();//鼠标滚轮缩放
map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐标为中心显示地图
map.addOverLay(marker) //添加标注到地图上
var controlZoom = new LTStandMapControl();
map.addControl( controlZoom );
//添加标注控件并把事件绑定到按钮
var controlB = new LTMarkControl();//标记控件
controlB.setVisible(false);
document.getElementById("addPosition").onclick=function (){map.removeOverLay( marker,true);controlB.btnClick()};
map.addControl( controlB );
LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
}
//添加标注时执行此函数
function getPoi(controlB){
var poi = controlB.getMarkControlPoint();
$("#x").val(poi.getLongitude());
$("#y").val(poi.getLatitude());
}
其他参数设置:
可以自定义标注图标样式
var ico=new LTIcon(" ",[24,24],[12,12]);//创建图标对象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//创建标注
//当鼠标移动到标注上可以显示标注内容
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('标注内容')});
51地图网址:http://api.51ditu.com/
在网页中引入
复制代码 代码如下:
在地图上标注:
复制代码 代码如下:
//地图标注
$(document).ready(function(){
var ico=new LTIcon("
var map=new LTMaps("mapdiv");//地图对象
var controlB; //标记控件
map.centerAndZoom("tianjin",5);//天津
map.handleMouseScroll();//鼠标滚轮
var controlZoom = new LTStandMapControl();//缩放控件
map.addControl( controlZoom );
controlB = new LTMarkControl();//添加标注控件并把事件绑定到按钮
controlB.setVisible(false);
document.getElementById("addPosition").onclick=function (){controlB.btnClick()};
map.addControl( controlB );
LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
})
复制代码 代码如下:
//添加标注时执行此函数
function getPoi(controlB){
var poi = controlB.getMarkControlPoint();
$("#x").val(poi.getLongitude()); //x,y为input标签id通过它传入后台储存位置
$("#y").val(poi.getLatitude());
}
复制代码 代码如下:
在读图上回显标注:
复制代码 代码如下:
//地图回显
$(document).ready(function(){
map("mapdiv");
})
//地图
function map(div){
var map=new LTMaps(div);//地图对象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//创建标注
map.handleMouseScroll();//鼠标滚轮缩放
map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐标为中心显示地图
map.addOverLay(marker) //添加标注到地图上
}
修改地图上的标注:
复制代码 代码如下:
//地图回显
$(document).ready(function(){
map("mapdiv");
})
//地图
function map(div){
var map=new LTMaps(div);//地图对象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//创建标注
map.handleMouseScroll();//鼠标滚轮缩放
map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐标为中心显示地图
map.addOverLay(marker) //添加标注到地图上
var controlZoom = new LTStandMapControl();
map.addControl( controlZoom );
//添加标注控件并把事件绑定到按钮
var controlB = new LTMarkControl();//标记控件
controlB.setVisible(false);
document.getElementById("addPosition").onclick=function (){map.removeOverLay( marker,true);controlB.btnClick()};
map.addControl( controlB );
LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
}
//添加标注时执行此函数
function getPoi(controlB){
var poi = controlB.getMarkControlPoint();
$("#x").val(poi.getLongitude());
$("#y").val(poi.getLatitude());
}
其他参数设置:
可以自定义标注图标样式
复制代码 代码如下:
var ico=new LTIcon("
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//创建标注
//当鼠标移动到标注上可以显示标注内容
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('标注内容')});
推荐阅读
-
google地图的路线实现代码_javascript技巧
-
Js实现双击鼠标自动滚动屏幕的示例代码_javascript技巧
-
JS 实现Table相同行的单元格自动合并示例代码_javascript技巧
-
JS 实现Table相同行的单元格自动合并示例代码_javascript技巧
-
JavaScript实现url地址自动检测并添加URL链接示例代码_javascript技巧
-
JavaScript实现url地址自动检测并添加URL链接示例代码_javascript技巧
-
用JavaScript实现类似于ListBox功能示例代码_javascript技巧
-
使用非html5实现js板连连看游戏示例代码_javascript技巧
-
非html5实现js版弹球游戏示例代码_javascript技巧
-
JS实现将人民币金额转换为大写的示例代码_javascript技巧