05 mapABC示例 leo

来源：互联网发布：大数据标准编辑：程序博客网时间：2024/05/03 22:35
//非常全面的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>
0 0