實(shí)現(xiàn)51Map地圖接口(示例代碼)
51Map免費(fèi)提供了地圖接口以下是調(diào)用接口并且實(shí)現(xiàn)地理位置標(biāo)注,存儲(chǔ),修改和回顯功能。
51地圖網(wǎng)址:http://api.51ditu.com/
在網(wǎng)頁(yè)中引入
<script type="text/javascript" src="http://api.51ditu.com/js/maps.js"></script>
在地圖上標(biāo)注:
//地圖標(biāo)注
$(document).ready(function(){
var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);
var map=new LTMaps("mapdiv");//地圖對(duì)象
var controlB; //標(biāo)記控件
map.centerAndZoom("tianjin",5);//天津
map.handleMouseScroll();//鼠標(biāo)滾輪
var controlZoom = new LTStandMapControl();//縮放控件
map.addControl( controlZoom );
controlB = new LTMarkControl();//添加標(biāo)注控件并把事件綁定到按鈕
controlB.setVisible(false);
document.getElementById("addPosition").onclick=function (){controlB.btnClick()};
map.addControl( controlB );
LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
})
//添加標(biāo)注時(shí)執(zhí)行此函數(shù)
function getPoi(controlB){
var poi = controlB.getMarkControlPoint();
$("#x").val(poi.getLongitude()); //x,y為input標(biāo)簽id通過它傳入后臺(tái)儲(chǔ)存位置
$("#y").val(poi.getLatitude());
}
<div id="mapdiv" style="width: 300px; height: 200px; position:static;">
<div align="center" style="margin: 12px;">
<a target="_blank"
style="color: #D01E14; font-weight: bolder; font-size: 12px;">看不到地圖請(qǐng)點(diǎn)這里</a>
</div>
</div>
在讀圖上回顯標(biāo)注:
//地圖回顯
$(document).ready(function(){
map("mapdiv");
})
//地圖
function map(div){
var map=new LTMaps(div);//地圖對(duì)象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//創(chuàng)建標(biāo)注
map.handleMouseScroll();//鼠標(biāo)滾輪縮放
map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐標(biāo)為中心顯示地圖
map.addOverLay(marker) //添加標(biāo)注到地圖上
}
修改地圖上的標(biāo)注:
//地圖回顯
$(document).ready(function(){
map("mapdiv");
})
//地圖
function map(div){
var map=new LTMaps(div);//地圖對(duì)象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//創(chuàng)建標(biāo)注
map.handleMouseScroll();//鼠標(biāo)滾輪縮放
map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐標(biāo)為中心顯示地圖
map.addOverLay(marker) //添加標(biāo)注到地圖上
var controlZoom = new LTStandMapControl();
map.addControl( controlZoom );
//添加標(biāo)注控件并把事件綁定到按鈕
var controlB = new LTMarkControl();//標(biāo)記控件
controlB.setVisible(false);
document.getElementById("addPosition").onclick=function (){map.removeOverLay( marker,true);controlB.btnClick()};
map.addControl( controlB );
LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
}
//添加標(biāo)注時(shí)執(zhí)行此函數(shù)
function getPoi(controlB){
var poi = controlB.getMarkControlPoint();
$("#x").val(poi.getLongitude());
$("#y").val(poi.getLatitude());
}
其他參數(shù)設(shè)置:
可以自定義標(biāo)注圖標(biāo)樣式
var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);//創(chuàng)建圖標(biāo)對(duì)象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//創(chuàng)建標(biāo)注
//當(dāng)鼠標(biāo)移動(dòng)到標(biāo)注上可以顯示標(biāo)注內(nèi)容
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('標(biāo)注內(nèi)容')});
相關(guān)文章
JavaScript常用數(shù)學(xué)函數(shù)用法示例
這篇文章主要介紹了JavaScript常用數(shù)學(xué)函數(shù)用法,結(jié)合實(shí)例形式分析了JavaScript常見的對(duì)數(shù)、平方、絕對(duì)值、正弦、四舍五入等相關(guān)數(shù)學(xué)函數(shù)使用技巧,需要的朋友可以參考下2018-05-05js點(diǎn)擊返回跳轉(zhuǎn)到指定頁(yè)面實(shí)現(xiàn)過程
這篇文章主要為大家詳細(xì)介紹了js點(diǎn)擊返回跳轉(zhuǎn)到指定頁(yè)面實(shí)現(xiàn)過程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04JavaScript的模塊化:封裝(閉包),繼承(原型) 介紹
在復(fù)雜的邏輯下, JavaScript 需要被模塊化,模塊需要封裝起來(lái),只留下供外界調(diào)用的接口。閉包是 JavaScript 中實(shí)現(xiàn)模塊封裝的關(guān)鍵,也是很多初學(xué)者難以理解的要點(diǎn)2013-07-07頁(yè)面向下滾動(dòng)ajax獲取數(shù)據(jù)的實(shí)現(xiàn)方法(兼容手機(jī))
下面小編就為大家?guī)?lái)一篇頁(yè)面向下滾動(dòng)ajax獲取數(shù)據(jù)的實(shí)現(xiàn)方法(兼容手機(jī))。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-05-05怎么在下面的HTML里調(diào)用數(shù)組cs[]的值
怎么在下面的HTML里調(diào)用數(shù)組cs[]的值...2007-01-01改進(jìn)UCHOME的記錄發(fā)布,增強(qiáng)可訪問性用戶體驗(yàn)
今天是看到UCDChina上的一篇文章文章 ,是關(guān)于SNS的用戶體驗(yàn)問題,發(fā)覺文中提到的第一個(gè)細(xì)節(jié),UCHOME就做的不好,于是改進(jìn)了一下。2011-01-01