實現(xiàn)51Map地圖接口(示例代碼)
更新時間：2013年11月22日 08:50:13 作者：
這篇文章主要介紹了實現(xiàn)51Map地圖接口的示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助
51Map免費提供了地圖接口以下是調用接口并且實現(xiàn)地理位置標注，存儲,修改和回顯功能。
51地圖網(wǎng)址：http://api.51ditu.com/
在網(wǎng)頁中引入
復制代碼 代碼如下:
<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)} );
})
復制代碼 代碼如下:
//添加標注時執(zhí)行此函數(shù)
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 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()));//創(chuàng)建標注
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()));//創(chuàng)建標注
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)} );
}
//添加標注時執(zhí)行此函數(shù)
function getPoi(controlB){
var poi = controlB.getMarkControlPoint();
$("#x").val(poi.getLongitude());
$("#y").val(poi.getLatitude());
}
其他參數(shù)設置：
可以自定義標注圖標樣式
復制代碼 代碼如下:
var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);//創(chuàng)建圖標對象
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//創(chuàng)建標注
//當鼠標移動到標注上可以顯示標注內(nèi)容
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('標注內(nèi)容')});
相關文章
本文主要介紹了js中函數(shù)的length是多少，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了Promise.race()方法功能及應用場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
兩種JavaScript的AES加密方式（可與Java相互加解密）
這篇文章主要介紹了兩種JavaScript的AES加密方式（可與Java相互加解密） 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
第一種利用ajax方式，第二種是動靜創(chuàng)建一個script標簽，配置其src屬性，經(jīng)過把script標簽拔出到頁面head來加載js，感樂趣的網(wǎng)友可以看下2016-04-04
理解this之前,先糾正一個觀點,this?既不指向函數(shù)自身,也不指函數(shù)的詞法作用域,下面這篇文章主要給大家介紹了關于JavaScript之this指向的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細介紹了用webAPI實現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript實現(xiàn)的原生態(tài)Tab標簽頁功能【兼容IE6】
這篇文章主要介紹了JavaScript實現(xiàn)的原生態(tài)Tab標簽頁功能,可兼容IE6及谷歌等瀏覽器,涉及javascript事件響應及頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-09-09
js對列表中第一個值處理與jsp頁面對列表中第一個值處理的區(qū)別詳解
本文是對js對列表中第一個值處理與jsp頁面對列表中第一個值處理的區(qū)別進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了微信小程序實現(xiàn)列表的橫向滑動，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
最近在看一本書：《高性能javaScript》，發(fā)現(xiàn)自己平時寫js存在很多小細節(jié)上的問題，雖然這些問題不會導致程序運行出錯，但是會導致界面加載變慢，用戶體驗變差，那么我們就來細細數(shù)一下應該注意的地方吧2014-02-02