百度地图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. SSH开发实践part2：双向1-N连接配置

    1 OK,上一篇已经介绍了项目开发的前期准备工作,具体内容可以参考:http://www.cnblogs.com/souvenir/p/3783686.html 按照开发步骤,我们现在已经可以开始进行 ...

  2. 华为OJ：火车进站

    火车进站 给定一个正整数N代表火车数量,0<N<10,接下来输入火车入站的序列,一共N辆火车,每辆火车以数字1-9编号.要求以字典序排序输出火车出站的序列号. 输入描述: 有多组测试用例, ...

  3. UNIX网络编程——网络IPC：套接字

    UNIX网络编程——网络IPC:套接字 Contents 套接字接口 套接字描述符 寻址 字节序 地址格式 地址查询 绑定地址 建立连接 数据传输 套接字选项 带外数据 UNIX域套接字 使用套接字的 ...

  4. 怎样在java代码中调用执行shell脚本

    // 用法:Runtime.getRuntime().exec("命令"); String shpath="/test/test.sh"; //程序路径 Pro ...

  5. Visual studio C#语言输出调试信息到Output窗口方法

    1.菜单栏: 工具>选项>调试>将所有输出窗口文本重定向到即时窗口          2.使用Console.WriteLine或Write添加调试信息 3.按F5启动调试程序 4. ...

  6. Java：IO流之转换流

    IO流的基本流情况: 字符流:                字符流缓冲区: FileReader              BufferedReader FileWriter             ...

  7. Oracle下的IF EXISTS()

    妈蛋..作为一个使用了SQL SERVER有4 5年的程序猿,开始用Oracle真他妈不习惯.写法真他妈不一样.比如像写个像IF EXISTS(SELECT * FROM sys.tables WHE ...

  8. poj: 3253

    这题一开始从大往小考虑是行不通的,这个时候从小到大考虑就很容易了.用一个priority_queue选出两个最小的值加到结果里再推回queue里,直到queue空为止.注意这里res要用long lo ...

  9. Difference between Pragma and Cache-control headers?

    Pragma is the HTTP/1.0 implementation and cache-control is the HTTP/1.1 implementation of the same c ...

  10. Android HTTPS(2)HttpURLConnection.getInputStream异常的原因及解决方案

    Common Problems Verifying Server Certificates InputStream in = urlConnection.getInputStream(); getIn ...