05 mapABC示例 leo

//非常全面的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;    //infoWindowvar 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     02listenerABC = 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.TileLayerscrollwheel: 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>

05 mapABC示例 leo相关推荐

【STM32】待机唤醒程序示例
00. 目录文章目录 00. 目录 01. 待机模式简介 02. 硬件模块 03. 相关函数 04. 程序示例一 05. 程序示例二 06. 附录 07. 声明 01. 待机模式简介很多单片机都有 ...
java offsetdatetime_Java OffsetDateTime withHour()用法及代码示例
Java中OffsetDateTime类的withHour()方法返回此OffsetDateTime的副本,其中一天中的小时数按照参数中的指定进行了更改. 用法: public OffsetDateT ...
oracle addmonth用法,PLSQL ADD_MONTHS用法及代码示例
PLSQL ADD_MONTHS函数用于返回添加了指定月份数的日期. ADD_MONTHS函数接受两个参数,分别是初始日期和要添加的月份数. ADD_MONTHS函数返回日期数据类型的值. date参 ...
【STM32】内部温度传感器示例
00. 目录文章目录 00. 目录 01. 内部温度传感器简介 02. 主要特性和框图 03. 硬件模块 04. 编程步骤 05. 程序示例 06. 附录 07. 声明 01. 内部温度传感器简介 ...
java怎么给时间赋值_Java 8新时间日期库java.time的使用示例
Instant--它代表的是时间戳 LocalDate--不包含具体时间的日期,比如 2020-01-14.它可以用来存储生日,周年纪念日,入职日期等. LocalTime--它代表的是不含日期的时间 ...
机械臂底层通信协议说明
➤ 01整体控制框架说明 ▲ 整体控制框架说明 ➤ 02硬件接口 2.1综合通信接口串行通信232逻辑电平波特率: 115200bps 数据位:8 停止位:1 奇偶校验:无 ➤ 03通信协议设备 ...
linux man命令无效,Linux man命令的具体使用
01. 命令概述 Linux提供了丰富的帮助手册,当你需要查看某个命令的参数时不必到处上网查找,只要man一下即可. 同时也可以使用man man 查看man的使用方法. 02. 命令格式 man [ ...
【Qt】QSharedMemory类详解
00. 目录文章目录 00. 目录 01. 概述 02. 公有类型 03. 成员方法 04. 程序示例一 05. 程序示例二 06. 源码下载 07. 附录 01. 概述 QSharedMemory ...
【机器视觉】dev_update_on和dev_update_off算子
00. 目录文章目录 00. 目录 01. 算子dev_update_on 02. 算子dev_update_off 03. 算子dev_update_on实现 04. 算子dev_update_o ...
【Qt】modbus之串口模式写操作
00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 写Coils程序示例 04. 写HoldingRegisters程序示例 05. 综合示例 06. 程序下载 07. 附录 ...

05 mapABC示例 leo

05 mapABC示例 leo相关推荐

最新文章

热门文章