通过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号