百度地图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. sql 泡沫 或者 递归查询

    if object_id('[tb]') is not null drop table [tb] go ),parentid int) insert [tb] ,N union all ,N unio ...

  2. 可灵活扩展的自定义Session状态存储驱动

    Session是互联网应用中非常重要的玩意儿,对于超过单台部署的站点集群,都会存在会话共享的需求.在web.config中,微软提供了sessionstate节点来定义不同的Session状态存储方式 ...

  3. java 基本数据类型 回顾

  4. 机器学习 —— 概率图模型（Homework: Structure Learning）

    概率图的学习真的要接近尾声了啊,了解的越多越发感受到它的强大.这周的作业本质上是data mining.从数据中学习PGM的结构和参数,完全使用数据驱动 —— No structure, No par ...

  5. 了解python

    Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.Python的文本文件是.py文件 Python的用途: 1.做日常事务,比如自动备份你的MP3 2.可以做网站,很多著名的网站包括 ...

  6. JSU 2013 Summer Individual Ranking Contest - 5

    JSU 2013 Summer Individual Ranking Contest - 5 密码:本套题选题权归JSU所有,需要密码请联系(http://blog.csdn.net/yew1eb). ...

  7. samba linux windows 请联系管理员

    在使用Samba进行建立Window与Linux共享时,要是不能访问,出现“您可能没有权限使用网络资源”, 那就是SELinux在作怪了 要是想让共享目录能访问,可以使用命令 #setenforce ...

  8. List<T> please check srcIndex

    这种错误的原因,是因为List<T>不是线程安全的.

  9. cdoj 1342 郭大侠与甲铁城 树状数组+离线

    郭大侠与甲铁城 Time Limit: 1500/800MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit St ...

  10. java获取系统指定时间年月日

    java获取系统指定时间年月日 private String setDateTime(String falg) { Calendar c = Calendar.getInstance(); c.set ...