//非常全面的mapabcdemo，所有的都有 http://code.mapabc.com/class_javascript.html
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="dituABC.aspx.cs" Inherits="Test_dituABC" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="http://apis.mapabc.com/webapi/auth.json?t=javascriptmap&v=3.1.1&key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300b"></script>
</head>
<body>
<input type="button" id="temp" disabled="disabled"/>
<input type="button" id="cancelDra" onclick="cancelDraw()" value="清除区域" />
<input type="button" id="startDra" onclick="startDraw();" value="开始画区域" />
<input type="button" id="btnGetAreaName" onclick="getAreaName();" value="获取地图上的覆盖物名称" />
<span style="color: #FF4500" id="spTip"></span>
<a href="#this" onclick="stoplistener()">关闭监听</a> <a href="#this" onclick="startlistener()">重启监听</a>
<div id="map_canvas" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
var mapABC; //地图
var markerABC; //点
var infoWindowABC = null; //infoWindow
var polyLineABC = null;
var arrPolygonPoints = []; //多边形点数组
var arrPolylinePoints = []; //折线数组
var polygonABC = null; //多边形
var polylineABC = null; //折线
var listenerABC = null;
var mouseToolABC; //鼠标工具模式
var startLng = 117.18993830481;
var startLat = 34.257423330251;
var offsetX = -70;
var offsetY = -60;
var defaultIconPath = "/images/defaut/veh_ya.png";
var smallIconPath = "/images/gongzuo.png";
$(function() {
initializeMapABC();
AddMarkPolylinePolygonInfowindow(); //加点 点监听弹出 infoWindow 02
listenerABC = mapABC.bind(mapABC, "click", listenerEvent); //03 监听click事件（加点、加线）
//startDraw(); //04 绘图按钮 与AddMarkPolylinePolygonInfowindow有冲突，不可以同时使用
});
//******************* ********************
//******************* 01 地图初始化 ********************
function initializeMapABC() {
var toolbar, overview, scale;
var opt = {
level: 13, //初始地图视野级别
center: new MMap.LngLat(parseFloat(startLng), parseFloat(startLat)), //设置地图中心点
doubleClickZoom: true, //双击放大地图
//defaultTileLayer:, //默认的底图图层 类型：MMap.TileLayer
scrollwheel: true //鼠标滚轮缩放地图
};
mapABC = new MMap.Map("map_canvas", opt);
mapABC.plugin(["MMap.ToolBar", "MMap.OverView", "MMap.Scale"], function() {
toolbar = new MMap.ToolBar();
toolbar.autoPosition = false; //加载工具条
mapABC.addControl(toolbar);
overview = new MMap.OverView(); //加载鹰眼
mapABC.addControl(overview);
scale = new MMap.Scale(); //加载比例尺
mapABC.addControl(scale);
});
}
//02 加点 点监听弹出 infoWindow
function AddMarkPolylinePolygonInfowindow() {
//******************* 02 打点 ********************
var markerOpt = {
id: "m",
position: new MMap.LngLat(parseFloat(startLng), parseFloat(startLat)), //
icon: "/images/defaut/veh_ya.png"
};
markerABC = new MMap.Marker(markerOpt);
mapABC.addOverlays(markerABC); //向地图添加覆盖物
mapABC.setCenter(new MMap.LngLat(parseFloat(startLng), parseFloat(startLat))); //置地图中心点经纬度，使用该方法地图将重新加载，会调整视野级别
//******************* 03 给点增加弹出框 bind click事件，增加infoWindow.open方法 ********************
var infoWidowOpt = {
content: "MapABC API",
offset: new MMap.Pixel(offsetX, offsetY) //MMap.Pixel(x,y) x 横向像素 y 纵向像素
};
infoWindowABC = new MMap.InfoWindow(infoWidowOpt);
mapABC.bind(markerABC, 'click', function (e) {
infoWindowABC.open(mapABC, e.lnglat);
});
//******************* 04添加折线叠加层 ********************
var arrPolyLinePath = new Array(); //经纬度坐标数组
arrPolyLinePath.push(new MMap.LngLat(parseFloat(startLng), parseFloat(startLat)));
arrPolyLinePath.push(new MMap.LngLat(parseFloat(startLng), parseFloat(startLat - 0.02)));
arrPolyLinePath.push(new MMap.LngLat(parseFloat(startLng - 0.03), parseFloat(startLat - 0.02)));
var polylineOpt = {
id: "polyline001",
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 5,
strokeStyle: "dashed", //solid，表示实线 dashed，表示虚线
path: arrPolyLinePath
};
polyLineABC = new MMap.Polyline(polylineOpt);
mapABC.addOverlays(polyLineABC); //mapABC.addOverlays("polyline001");
}
//03 监听click事件（加点、加线）
function listenerEvent(event) {
showMarker(event.lnglat);
// drawPolyline(event.lnglat);
drawPolygon(event.lnglat);
}
//0301 显示标记
function showMarker(location) {
var clickedLocation = location;
var mymarker = new MMap.Marker({
position: clickedLocation,
icon: smallIconPath
});
mapABC.addOverlays(mymarker);
}
//0302 显示折线
function drawPolyline(location) {
if (polylineABC != null) {
mapABC.clearOverlaysByType("polyline"); //这回把AddMarkPolylinePolygonInfowindow中的polyline也删除了
}
arrPolylinePoints.push(location);
polylineABC = new MMap.Polyline(
{ id: "polyline01"
, path: arrPolylinePoints
, strokeColor: "#F00"
, strokeOpacity: 0.4
, strokeWeight: 3
, strokeStyle: "dashed"
, strokeDasharray: [10, 5]
});
mapABC.addOverlays(polylineABC);
}
//0303显示多边形
function drawPolygon(location) {
if (polygonABC != null) {
mapABC.clearOverlaysByType("polygon");
}
arrPolygonPoints.push(location);
polygonABC = new MMap.Polygon({
id: "polygon01",
path: arrPolygonPoints,
//map: mapABC, //没有此属性
strokeColor: '#ff0000',
//fillColor: '#ff0000',
strokeOpacity: 0.6,
strokeWeight: 5
});
mapABC.addOverlays(polygonABC);
}
//05
//删除监听程序
function stoplistener() {
//google.maps.event.removeListener(listenerGoogle);
mapABC.unbind(mapABC,"click",listenerEvent);
}
//开始监听程序
function startlistener() {
listenerABC = mapABC.bind(mapABC, "click", listenerEvent);
}
//04 绘图事件
//0401开始画区域
function startDraw() {
mapInit(); //初始化绘图工具
mouseToolABC.polygon(); //指定绘图工具模式（这样就可以绘图了'marker'、'polyline'、'circle'、'rule'。。。都可以）
//有以上两步就可以绘图了，下面的可以不要
stoplistener(); //删除监听程序,因为之前有监听click的程序，会与绘图工具同时调用click方法，冲掉绘图工具的方法
mapABC.clearOverlays();
$("#spTip").html("<image alt='' src='../../images/salearea.png' style='float:left;'/>鼠标按下拖动画圆，抬起结束");
}
//0402取消已画区域
function cancelDraw() {
$("#spTip").html("");
mapABC.clearOverlays();
mapABC.setDefaultCursor();
}
//0403取消已画区域 获取当前覆盖物的长度
function getAreaName() {
var tempLength = null;
var curObjs = mapABC.getOverlaysByType("polygon"); //类型返回覆盖物对象
if (curObjs == undefined) {
} else {
for (var i = 0;i < curObjs.length; i++) {
tempLength += curObjs[i].path.length + "__";
}
alert("all overlay length is " + tempLength); //路径长度
}
}
//初始化鼠标工具
function mapInit() {
mapABC.plugin("MMap.MouseTool", function () {
mouseToolABC = new MMap.MouseTool(mapABC); //构造鼠标工具实例
});
}
</script>
</body>
</html>
507
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
