百度地图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. 学了C语言，如何写个程序计算出每个月的第一个星期一对应的日期

    在前面,我们分别利用泰勒公式和C标准库中的mktime()函数推算了某个特定日期所对应的星期几,刚做完这些,就又遇到了一个与日期相关的新任务: 老板把每个月例会的时间定在了每个月的第一个星期一,他让我 ...

  2. ARM菜鸟：JLINK与JTAG的区别

    调试ARM,要遵循ARM的调试接口协议,JTAG就是其中的一种.当仿真时,IAR.KEIL.ADS等都有一个公共的调试接口,RDI就是其中的一种,那么我们如何完成RDI-->ARM调试协议(JT ...

  3. Android中级之网络数据解析一之xml解析

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! --Comic Sans MS Xml解析具有跨平台性,语言无关性,易操作性,因此广受开发者的欢迎. ...

  4. Spring Loaded is a JVM agent for reloading class file changes

    <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot ...

  5. tomcat报警告 An attempt was made to authenticate the locked user

    有好多这样的警报怪怪的,一分钟抛一次,大概抛了10分钟,停止 有 Anattempt was made to authenticate the locked user "root" ...

  6. URAL 1069 Prufer Code 优先队列

    记录每个节点的出度,叶子节点出度为0,每删掉一个叶子,度数-1,如果一个节点的出度变成0,那么它变成新的叶子. 先把所有叶子放到优先队列中. 从左往右遍历给定序列,对于root[i],每次取出叶子中编 ...

  7. Ubuntu Server搭建svn服务以及迁移方法【转】

    转自:http://www.linuxidc.com/Linux/2013-05/84693.htm Ubuntu Server搭建svn服务以及迁移方法 采用apache+svn,http访问方式. ...

  8. webapp框架集合

    1.GoAngualrjs homepage  github GoAngular 可让你轻松使用 AngularJS 和 GoInstant 构建实时.多用户的应用程序. 2.JingleV home ...

  9. Spring Injection with @Resource, @Autowired and @Inject

    August 1st, 2011 by David Kessler Overview I’ve been asked several times to explain the difference b ...

  10. DHT11温湿度传感器

    一.硬件介绍 RH是相对湿度,是用零点温度来定义的,一般,RH在45%~65%之间最为合适. 注:NTC为热敏电阻,输出为:单总线数字信号,单线双向串行通讯. 注:上拉电阻情况下,配置为开漏输出,可以 ...