51Map免费提供了地图接口以下是调用接口并且实现地理位置标注,存储,修改和回显功能。
51地图网址:
http://api.51ditu.com/
在网页中引入
<script type="text/javascript" src="http://api.51ditu.com/js/maps.js"></script>
在地图上标注:
//地图标注
$(document).ready(function(){
var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[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());
}
<div id="mapdiv" style="width: 300px; height: 200px; position:static;">
<div align="center" style="margin: 12px;">
<a href="http://api.51ditu.com/docs/mapsapi/help.html" target="_blank"
style="color: #D01E14; font-weight: bolder; font-size: 12px;">看不到地图请点这里</a>
</div>
</div>
在读图上回显标注:
//地图回显
$(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("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);//创建图标对象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//创建标注
//当鼠标移动到标注上可以显示标注内容
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('标注内容')});
- 大小: 16.6 KB
分享到:
相关推荐
主要介绍了实现51Map地图接口的示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
轻松搞定51地图 51地图接口 轻松搞定51map
12.javaMap 接口及其实现类.zip12.javaMap 接口及其实现类.zip12.javaMap 接口及其实现类.zip12.javaMap 接口及其实现类.zip12.javaMap 接口及其实现类.zip12.javaMap 接口及其实现类.zip12.javaMap 接口及其实现类....
TileMap地图游戏资源
13.javaMap接口的两个实现类:.zip13.javaMap接口的两个实现类:.zip13.javaMap接口的两个实现类:.zip13.javaMap接口的两个实现类:.zip13.javaMap接口的两个实现类:.zip13.javaMap接口的两个实现类:.zip13.java...
全面的对GoogleMap和BingMap 的地图API进行分析,如果是做地图开发或做自己的GIS平台,应该是有帮助的
simplemap完整实现simplemap完整实现simplemap完整实现simplemap完整实现simplemap完整实现simplemap完整实现
vs2013 自己实现的一个简易Map(c++)。
MAP地图在线工具,MAP地图在线工具MAP地图在线工具MAP地图在线工具MAP地图在线工具MAP地图在线工具
Google_Map_Api_谷歌地图接口整理
微信小程序—map地图实现标记多个位置(导入即可用) 可参考博文:https://blog.csdn.net/weixin_43042683/article/details/103555505
List接口,Map接口,迭代器terator,泛型集合
高度可定制又搭配了经典的 Unity 检查器界面,GO Map 堪称最简单的地图插件。 通过在各种示例中进行选择可充分了解 GO Map 功能,并只需几次点击即可使用真实的 GPS 位置在智能手机上构建任何演示场景
1.vue-baidu-map在线地图代码不用改动,只用按照文档添加baidu-api.js和baidu-init.js,并在vue依赖包 node_modules文件找到,修改vue-baidu-map的 index.js文件 就能完成离线配置 2.jar包可以免费下载百度地图瓦片...
echarts map 地图完整json数据 包含中国json数据,各省数据,各市数据
echarts-map地图省、市、区县地图的json数据,可直接使用制作地图
Googlemap静态地图实现简介(网页复制版)看懂这个,可以实现浏览器上嵌入Google地图
调用地图接口实现地图展示,并在制定位置添加标示,鼠标悬停时显示标示备注。有html 示例,可直接运行,并且有转换成.net 前后台代码文件
AMAp地图开发的最新官方Android版的demo,例子十分详细