百度地图Api之自定义标注：（获得标注的经纬度和中心经纬度即缩放度）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImgPos.aspx.cs" Inherits="Test_Web1.ImgPos" %>

<!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="http://api.map.baidu.com/api?key=Xk7GGYEEw6ly1mo4thDwtaxl&v=1.1&services=true"></script>

    <script type="text/javascript" src="/Js/jquery-1.6.2.min.js"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table>

            <tr>

            <td>

            <div id="iPicture" style="border:1px solid blue;width:1000px;height:600px;">

                  <%--<div id="picture1" style="background: url('/Img/home.JPG')"></div>--%>

                  <%--<image  id="picture1"  src="/Img/home.JPG"></image>--%>

                  <!--百度地图容器-->

                  <div style="width:1000px;height:600px;border:#ccc solid 1px;" id="dituContent"></div>

            </div>

            </td>

            <td>

            <div id="tdvDevices" style="border:1px solid blue;width:200px;height:600px;">

                <span id="sp1"></span>

            </div>

            </td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

<script type="text/javascript">

//    //添加一个监听事件

//    map.addEventListener('click', function (e) {

//        $('#sp1').text(e.point.lng + "|" + e.point.lat);

//        //定义一个图标

//        var icon = new BMap.Icon('/Img/1.png', new BMap.Size(20, 32), {

//            anchor: new BMap.Size(10, 30),

//            infoWindowAnchor: new BMap.Size(0, 0)

//        });

//        //定义一个标注

//        var mkr = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat), {

//            icon: icon,

//            enableDragging: true, //支持拖拽

//            raiseOnDrag: true

//        });

//        var label = new BMap.Label('环益国际', { "offset": new BMap.Size(9, -15) });

//        mkr.setLabel(label);

//        //把标注加入地图

//        map.addOverlay(mkr);

//        //监听 获得标注拖拽后的经维度

//        mkr.addEventListener('dragend', function (e) {

//            $('#sp1').text(e.point.lng + "|" + e.point.lat);

//        });

//    });

</script>

<script type="text/javascript">

    //创建和初始化地图函数：

    function initMap() {

        createMap(); //创建地图

        setMapEvent(); //设置地图事件

        addMapControl(); //向地图添加控件

    }

    //创建地图函数：

    function createMap() {

        var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图

        var point = new BMap.Point(116.096402, 40.03304); //定义一个中心点坐标

        map.centerAndZoom(point, ); //设定地图的中心点和坐标并将地图显示在地图容器中

        window.map = map; //将map变量存储在全局

    }

    //地图事件设置函数：

    function setMapEvent() {

        map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)

        map.enableScrollWheelZoom(); //启用地图滚轮放大缩小

        map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)

        map.enableKeyboard(); //启用键盘上下左右键移动地图

    }

    //地图控件添加函数：

    function addMapControl() {

        //向地图中添加缩放控件

        var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });

        map.addControl(ctrl_nav);

        //向地图中添加缩略图控件

        var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen:  });

        map.addControl(ctrl_ove);

        //向地图中添加比例尺控件

        var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });

        map.addControl(ctrl_sca);

    }

    initMap(); //创建和初始化地图

    //定义一个用于标注的图标

    var icon = new BMap.Icon('/Img/1.png', new BMap.Size(, ), {

        anchor: new BMap.Size(, ),

        infoWindowAnchor: new BMap.Size(, )

    });

    function LocationDevice() {

        //定位设备

        var idd = '';

        $('input[name=btn_devices]').each(function (k, v) {

                        $(this).click(function () {

                        idd = $(this).attr('id');

                    });

        });

        //当鼠标进入地图点击时，获得鼠标的经维度，

        map.addEventListener('click', function (e) {

            if (idd.length <= ) {

                return;

            }

            var v = $('#' + idd + '').val(); //值

            var x = e.point.lng;

            var y = e.point.lat;

            $('#sp1').text(x + "|" + y);

            //在该经维度创建一个标注(含Icon)，再创建一个label标签，把label加入标注,把标注加入地图，设置这个按钮的经纬度并隐藏，

            //定义一个标注

            var mkr = new BMap.Marker(new BMap.Point(x, y), {

                icon: icon,

                enableDragging: true, //支持拖拽

                raiseOnDrag: true

            });

            var label = new BMap.Label(v, { "offset": new BMap.Size(, -) });

            mkr.setLabel(label);

            map.addOverlay(mkr);

            $('#' + idd + '').attr({ 'hidden': 'true', 'lnt': x, 'lat': y });

            //给这个标注添加拖拽事件，获得拖拽后的经纬度，设置这个按钮的经纬度并隐藏，

            mkr.addEventListener('dragend', function (e) {

                $('#' + idd + '').attr({ 'lnt': x, 'lat': y });

                $('#sp1').text(x + "|" + y);

                var center = map.getCenter();

                alert("地图中心点变更为：" + center.lng + ", " + center.lat + "；地图缩放至：" + map.getZoom() + "级");

            });

            //移除当前按钮的事件

            idd = '';

        });

    }

    $(function () {

        //加载设备

        $.ajax({

            type: 'post',

            dataType: 'json',

            url: '/ImgPos.ashx',

            data: { action: 'show' },

            success: function (data) {

                if (data.status == 'error') {

                    alert('服务器错误:' + data.msg);

                } else if (data.status == 'ok') {

                    if ($('#dvDev')) {

                        $('#dvDev').remove();

                    }

                    var dvDev = $('<div id="dvDev"></div>').appendTo($('#tdvDevices'));

                    dvDev.css({ 'width': '200px', 'height': '300px', 'border': '1px solid blue' });

                    //遍历设备

                    $.each(data.data, function (k, v) {

                        //创建按钮

                        var btnDev = $('<input type="button" value="' + v.Name + '" devid="' + v.ID + '" />').appendTo(dvDev);

                        btnDev.css({ 'width': '200px', 'height': '40px' });

                        btnDev.attr({ 'id': 'devce' + v.ID, 'name': 'btn_devices' });

                        $('<br/>').appendTo(dvDev);

                    });

                    LocationDevice();

                } else {

                    alert('服务器错误:' + data.status);

                }

            },

            error: function () {

                alert('服务器错误');

            }

        });

        //更新坐标到数据库

    })

    </script>

ImgPosition.ahsx

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/html";

            string action=context.Request["action"];

            if (action == "show")

            {

                List<Device> list = new List<Device>();

                list.Add(new Device(, "设备1", "/Img/1.png", "", ""));

                list.Add(new Device(, "设备2", "/Img/2.png", "", ""));

                list.Add(new Device(, "设备3", "/Img/3.png", "", ""));

                list.Add(new Device(, "设备4", "/Img/4.png", "", ""));

                list.Add(new Device(, "设备5", "/Img/5.png", "", ""));

                string json = new JavaScriptSerializer().Serialize(new { status = "ok", data = list, msg = "成功" });

                context.Response.Write(json);

            }

            else

            {

                string json = new JavaScriptSerializer().Serialize(new { status = "error", data = "", msg = "未知的action=" + action });

                context.Response.Write(json);

            }

        }

百度地图Api之自定义标注：（获得标注的经纬度和中心经纬度即缩放度）的更多相关文章

  1. 【百度地图API】自定义可编辑的交通路线

    原文:[百度地图API]自定义可编辑的交通路线 任务描述: 我想自己绘制一条从地铁站出口到天安门的道路,而且还需要根据我的喜好来改变这条路线. 如何实现: 鼠标左击地图,绘制路线:双击后,绘制结束:绘 ...

  2. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

  3. 深入浅出百度地图API开发系列（1）：前言

    百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...

  4. 百度地图api的覆盖物样式与bootstrap样式冲突解决办法

    使用百度地图api 和 bootstrap ,发现标注样式出现了问题 label左侧 宽度变得非常窄 正常情况下应该是下面这样的: 原因是boostrap样式和百度地图样式冲突了. 解决办法: .ba ...

  5. 百度地图API 自定义标注图标

    通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...

  6. 百度地图api之如何自定义标注图标

    在百度地图api中,默认的地图图标是一个红色的椭圆形.但是在项目中常常要求我们建立自己的图标,类似于我的这个 操作很简单,分如下几步进行 步骤一:先ps一个图标,大小要合适,如果要背景透明的,记得保存 ...

  7. 百度地图API多个点聚合时，标注添加的标签label地图刷新就丢失的问题解决

    当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合A ...

  8. 百度地图API 添加自定义标注 多点标注

    原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...

  9. 【百度地图API】你看过房产地图吗？你知道房产标注是如何建立的吗？

    原文:[百度地图API]你看过房产地图吗?你知道房产标注是如何建立的吗? 你是不是看过很多房产网站?例如安居客,新浪乐居. 你是不是也想做一个能写文字的标注? 你知道怎么去实现麼? 其实,上图这样的标 ...

随机推荐

  1. SQLHelper.cs的经典代码-存储过程

    using System; using System.Collections.Generic; using System.Text; using System.Collections; using S ...

  2. CodeBlocks ubuntu常见问题及小技巧

    1.安装完后没有快捷键的设置: http://blog.csdn.net/sjwbcb/article/details/4797785 感谢这哥,原来是包没有装全. codeblocks用ubuntu ...

  3. 很赞的MathJax

    一直想在网页上放进LaTeX布局,但由于是要发布在SAE上,因此有很多的限制. 然后在这儿发现了这个好东东,MathJax,非常方便,JS直接可以外链. 通过它,我编辑了这个页面,看起来很不错哦.

  4. UX结合需求实例化进行设计开发

    技  术  文  件 技术文件名称:实例化+UX需求分析实践:场景监控需求实例化 技术文件编号: 版        本:V1.0 共 32 页 (包括封面) 拟  制    廖开蒙.刀锋团队 审  核 ...

  5. Javascript获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

    /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    ...

  6. springmvc 中常用的注解配置使用说明

    很久没有用springmvc了,今天复习了一下,然后记录一下总结. @Controller     使用 @Controller 注释对将成为 MVC 中控制器的类进行注释并处理 HTTP 请求. @ ...

  7. Android: 启动init.rc 中service的权限问题【转】

    转自:http://www.linuxidc.com/Linux/2011-04/35014.htm 通过property_set("ctl.start", service_xx) ...

  8. 在LINUX上创建GIT服务器【转】

    转自:http://blog.csdn.net/xiongmc/article/details/9176785 如果使用git的人数较少,可以使用下面的步骤快速部署一个git服务器环境. 1. Cli ...

  9. 加密工具类 - CryptoUtils.java

    加密工具类,包含MD5,BASE64,SHA,CRC32的加密与解密方法. 源码如下:(点击下载  - CryptoUtils.java.commons-io-2.4.jar.commons-code ...

  10. R语言常用基础知识

    seq(from = 1, to = 1, by = ((to - from)/(length.out - 1)),     length.out = NULL, along.with = NULL, ...