mapabc简单实例

最新推荐文章于 2021-02-21 03:15:41 发布

zxf_noimp1

最新推荐文章于 2021-02-21 03:15:41 发布

阅读量279

点赞数

分类专栏： web应用开发文章标签： jQuery JavaScript Ajax HTML ViewUI

本文链接：https://blog.csdn.net/zxf_noimp1/article/details/83945721

版权

web应用开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script
	src="http://app.mapabc.com/apis?&t=flashmap&v=2.2&key=c286e2ee3ea0c4b1c431977a137a600e1be62fc049208d38f5d9a69e2d2e2f4f14a51514ed0357b8"
	type="text/javascript"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
	type="text/javascript"></script>
<title>mapabc示例</title>
<script type="text/javascript">

	var mapObj;
	$(document).ready(function() {
		var mapOptions = new MMapOptions();//构建地图辅助类 
		mapOptions.zoom = 13;//要加载的地图的缩放级别 
		mapOptions.center = new MLngLat(113.642578,34.705493);//要加载的地图的中心点经纬度坐标 
		mapOptions.toolbar = DEFAULT;//设置地图初始化工具条 
		mapOptions.toolbarPos = new MPoint(15, 15); //设置工具条在地图上的显示位置 
		mapOptions.overviewMap = SHOW; //设置鹰眼地图的状态，SHOW:显示，HIDE:隐藏（默认） 
		mapOptions.scale = SHOW; //设置地图初始化比例尺状态，SHOW:显示（默认），HIDE:隐藏。 
		mapOptions.returnCoordType = COORD_TYPE_OFFSET;//返回数字坐标 
		mapOptions.zoomBox = true;//鼠标滚轮缩放和双击放大时是否有红框动画效果。 
		mapObj = new MMap("mapObj", mapOptions); //地图初始化 
		
		createTip("信息窗口标题","信息窗口内容",1,"113.642578","34.756493","mark101");//创建点
		//添加点击事件
		mapObj.addEventListener(mapObj,MOUSE_CLICK,function(param){
			createTip("","",2,param.eventX,param.eventY,"mark102");
		});
	});
	
	//创建点
	function createTip(title,content,i,x,y,id){
		var tipOption = new MTipOptions();//添加信息窗口 
		tipOption.title = title;//信息窗口标题 
		tipOption.content = content;//信息窗口内容 
		tipOption.tipWidth =500;
		var markerOption = new MMarkerOptions();//构建一个名为markerOption的点选项对象。 
		markerOption.imageUrl="http://code.mapabc.com/images/apin/lan_"+i+".png";//标注图片或SWF的url，默认为蓝色气球图片 
		markerOption.anchor = new MPoint(0, 0);//图片锚点BOTTOM_CENTER相对于标注位置的位置 
		markerOption.imageAlign = BOTTOM_CENTER;//设置图片相对于加点经纬度坐标的位置。九宫格位置。默认BOTTOM_CENTER代表正下方 
		markerOption.isEditable = false;//设置点是否为可编辑状态,rue，可以编辑；   false，不可编辑（默认） 
		markerOption.tipOption = tipOption;//设置点的信息窗口参数选项
		markerOption.canShowTip = true;//是否在地图中显示信息窗口，true，可以显示（默认）；false，不显示 
		markerOption.rotation = "0";//设置图标旋转的角度 
		Mmarker = new MMarker(new MLngLat(x,y), markerOption);//通过经纬度坐标及参数选项确定标注信息 
		Mmarker.id = id;//对象编号，也是对象的唯一标识 
		mapObj.addOverlay(Mmarker, true);//向地图添加覆盖物 
	}
</script>
</head>
<body>
<div id="mapObj" class="view" style="width: 1000px; height: 500px"></div>
</body>
</html>

官方地址： http://www.mapabc.com

API：http://code.mapabc.com/reference.html