通過mapabc的地圖api實現地圖標注(一)
最近公司需要做一個地圖搜房功能，以前從來沒做過啊。只好硬著頭皮上了。
匆匆的看了下mapabc的api就開始動手了。先從后臺顯示地圖開始吧。
第一步顯示地圖在頁面上。
<html>
<script type="text/javascript" src="http://app.mapabc.com/apis?&t=flashmap&v=2.4&key={key}"></script>
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var mapObj = null;
function mapInit() {
var mapoption = new MMapOptions();
mapoption.toolbar = MConstants.DEFAULT;
mapoption.overviewMap = MConstants.SHOW;
mapoption.scale = MConstants.HIDE;
mapoption.zoom = 13;
mapoption.center = new MLngLat(120.301924, 31.582009);
mapoption.language = MConstants.MAP_CN;
mapoption.fullScreenButton = MConstants.HIDE;
mapoption.centerCross = MConstants.SHOW;
mapoption.toolbarPos = new MPoint(20, 20);
mapoption.mapComButton = MConstants.SHOW_NO;
mapObj = new MMap("map", mapoption);
}
</script>
<body onload="mapInit();">
<div id="map" style="width:700px;height:400px"></div>
</body>
</html>
<script type="text/javascript" src="http://app.mapabc.com/apis?&t=flashmap&v=2.4&key={key}"></script>
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var mapObj = null;
function mapInit() {
var mapoption = new MMapOptions();
mapoption.toolbar = MConstants.DEFAULT;
mapoption.overviewMap = MConstants.SHOW;
mapoption.scale = MConstants.HIDE;
mapoption.zoom = 13;
mapoption.center = new MLngLat(120.301924, 31.582009);
mapoption.language = MConstants.MAP_CN;
mapoption.fullScreenButton = MConstants.HIDE;
mapoption.centerCross = MConstants.SHOW;
mapoption.toolbarPos = new MPoint(20, 20);
mapoption.mapComButton = MConstants.SHOW_NO;
mapObj = new MMap("map", mapoption);
}
</script>
<body onload="mapInit();">
<div id="map" style="width:700px;height:400px"></div>
</body>
</html>
第二步就是思考如何才能把地圖坐標結合到我的自己數據庫里去。還好api里面有個得到當前中心點坐標的功能，于是就好辦了。
mapObj.addEventListener(mapObj, MConstants.DRAG_END, endDrag); //鼠標拖動地圖以后觸發事件
function endDrag(param) {
var center = mapObj.getCenter(); //返回MLngLat類對象，該對象代表當前地圖中心點的位置
centerX = center.lngX; //通過對象的屬性返回經度坐標
centerY = center.latY; //通過對象的屬性返回緯度坐標
$("#xx").empty();
$("#xx").attr("value", centerX); // 填充內容
$("#yy").empty();
$("#yy").attr("value", centerY);
}
function endDrag(param) {
var center = mapObj.getCenter(); //返回MLngLat類對象，該對象代表當前地圖中心點的位置
centerX = center.lngX; //通過對象的屬性返回經度坐標
centerY = center.latY; //通過對象的屬性返回緯度坐標
$("#xx").empty();
$("#xx").attr("value", centerX); // 填充內容
$("#yy").empty();
$("#yy").attr("value", centerY);
}
經度：<input type=text id=xx value="" name=xx readonly=readonly />
緯度：<input type=text id=yy value="" name=yy readonly=readonly />
緯度：<input type=text id=yy value="" name=yy readonly=readonly />
提交以后將經緯度的坐標放數據庫就行了。
浙公網安備 33010602011771號