百度地图APi详解之数据监控案例详解

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。

接下来我们进入百度地图API的学习

一.注册账号Key

1.1进入百度官网

百度地图APi详解之数据监控案例详解

1.2 进入官网

一.进入官网大家会看到这样的一个页面,因为本人事先注册过。在这里不再掩饰重新注册。

百度地图APi详解之数据监控案例详解

二.点击【创建应用】按钮进入填写信息页面入下图:

1.3 注册完点击【提交】会生成一个Key。返回就会看到列表显示已注册的Key。接下来我们就开始如何使用key来现实我们的地图和业务开发。

二.加载初始化页面

1.1 新建一个index.html页面【vs2013】-新建项目-解决方案名为BaiduMapJavaScriptAPI的Web程序如下图:

1.2 在页面内放入一个div     <div id=”map”></div> 用来承载地图。然后在拖入js库

  <script src=”/Scripts/jquery-1.8.2.min.js”></script>

 <script type=”text/javascript” src=”http://api.map.baidu.com/api?v=2.0&ak=你注册的key”></script>

1.3 初始化地图

   // 百度地图API功能

        var map = new BMap.Map(“map”, {

            enableMapClick: false

        });    // 创建Map实例

        map.centerAndZoom(new BMap.Point(105.403119, 38.028658),6);  // 初始化地图,设置中心点坐标和地图级别

        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        map.setMapStyle({

            style: ‘midnight’

        });

1.4 保存代码-启动项目你看到的点是已经做的下面我们会接着学习如何更深层次的使用API。此时你已经成功的加载出地图了。

三.坐标使用

1.1 在js中加入如下代码并保存

1.2运行项目看到如下页面这样点的标注就加好了。

四.监控闪烁案例

1.1 随着项目的深入,有时候我们并不想使用本身的标注,我们会根据自己的的业务去定制自己个性化的东西。本小节叫你如何使用标注高级应用。比如我们监控数据根据不同的状态要现实红,蓝,绿等标点。代表不同的监控设备状态。

2.1 script 中加入如下代码:

    

<script type=”text/javascript”>

        function SquareOverlay(Id, color, x, y) {

            // this._center = center;

            // this._length = length;

            this._length = 10;

            this._color = color;

            this._x = x;

            this._y = y;

            this._Id = Id;

        }

        // 继承API的BMap.Overlay

        SquareOverlay.prototype = new BMap.Overlay();

        // 实现初始化方法

        SquareOverlay.prototype.initialize = function (map) {

            // 保存map对象实例

            this._map = map;

            // 创建div元素,作为自定义覆盖物的容器

            var div = document.createElement(“canvas”);

            div.style.position = “absolute”;

            // 可以根据参数设置元素外观

            div.style.width = this._length + “px”;

            div.style.height = this._length + “px”;

            div.style.background = this._color;

            div.style.borderRadius = this._length / 2 + “px”;

            div.style.border = “solid rgb(” + this._length + “,” + this._length + “,” + this._length + “) 1px”;

            div.id = this._Id;

            if (this._color == “red”) {

                div.className = “btn-twinkle”;

            }

            div.onclick = function (e) {

                debugger;

                // map.openInfoWindow(new BMap.InfoWindow(“地址:济南邦德激光股份公司”, opts), new BMap.Point(‘117.684667’, ‘36.233654’)); //开启信息窗口

                debugger;

                var p = new BMap.Point(‘117.684667’, ‘36.233654’);

                //var p1 = map.overlayPixelToPoint(e.screenX, e.screenY);

                //var p2 = map.pixelToPoint(e.pageX, e.pageY);

                map.openInfoWindow(new BMap.InfoWindow(“地址:济南邦德激光股份公司”, opts), p); //开启信息窗口

            };

            // 将div添加到覆盖物容器中

            map.getPanes().markerPane.appendChild(div);

            // 保存div实例

            this._div = div;

            // 需要将div元素作为方法的返回值,当调用该覆盖物的show、

            // hide方法,或者对覆盖物进行移除时,API都将操作此元素。

            return div;

        }

        //实现绘制方法

        SquareOverlay.prototype.draw = function () {

            // 根据地理坐标转换为像素坐标,并设置给容器

            // var position = this._map.pointToOverlayPixel(this._center);

            var position = this._map.pointToOverlayPixel(new BMap.Point(this._x, this._y));

            this._div.style.left = position.x – this._length / 2 + “px”;

            this._div.style.top = position.y – this._length / 2 + “px”;

        }

        // 实现显示方法

        SquareOverlay.prototype.show = function () {

            if (this._div) {

                this._div.style.display = “”;

            }

        }

        // 实现隐藏方法

        SquareOverlay.prototype.hide = function () {

            if (this._div) {

                this._div.style.display = “none”;

            }

        }

        // 添加自定义方法

        SquareOverlay.prototype.toggle = function () {

            if (this._div) {

                if (this._div.style.display == “”) {

                    this.hide();

                }

                else {

                    this.show();

                }

            }

        }

        // 百度地图API功能

        var map = new BMap.Map(“map”, {

            enableMapClick: false

        });    // 创建Map实例

        map.centerAndZoom(new BMap.Point(105.403119, 38.028658),6);  // 初始化地图,设置中心点坐标和地图级别

        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        map.setMapStyle({

            style: ‘midnight’

        });

        debugger;

        var opts = {

            width: 200,     // 信息窗口宽度

            height: 100,     // 信息窗口高度

            title: “XXXXXX”, // 信息窗口标题

            enableMessage: true,//设置允许信息窗发送短息

            message: “XXXXX”

        };

        //  var infoWindow = new BMap.InfoWindow(“地址:北京市东城区王府井大街88号乐天银泰百货八层”, opts);  // 创建信息窗口对象

        // 添加自定义覆盖物

        map.addOverlay(new SquareOverlay(‘1’, “red”, ‘117.684667’, ‘36.233654’));

        map.addOverlay(new SquareOverlay(‘2’, “red”, ‘107.644227’, ‘35.726801’));

        map.addOverlay(new SquareOverlay(‘3’, “red”, ‘106.530635’, ‘29.544606’));

        map.addOverlay(new SquareOverlay(‘4’, “yellow”, ‘123.987289’, ‘47.3477’));

        map.addOverlay(new SquareOverlay(‘5’, “green”, ‘91.750644’, ‘29.229027’));

        map.addOverlay(new SquareOverlay(‘6’, “black”, ‘ 85.614899’, ‘42.127001’));

        map.addOverlay(new SquareOverlay(‘7’, “red”, ‘37.615979’, ‘55.742769’));

        map.addOverlay(new SquareOverlay(‘8’, “red”, ‘-121.326863’, ‘38.377087’));

        map.addOverlay(new SquareOverlay(‘9’, “red”, ‘135.574686’, ‘34.330914’));

        map.addOverlay(new SquareOverlay(’10’, “red”, ‘73.870152’, ‘33.502642’));

        //单击获取点击的经纬度(以此来定位外国收费的地点)

        map.addEventListener(“click”, function (e) {

            alert(e.point.lng + “,” + e.point.lat);

            //var x = e.point.lng;

            //var y = e.point.lat;

            //var str = String(x) + String(y)

            //alert(str);

            

            //var pv = new BMap.Point(e.point.lng, e.point.lat);

            //var optsv = {

            //    width: 200,     // 信息窗口宽度

            //    height: 100,     // 信息窗口高度

            //    title: str, // 信息窗口标题

            //    enableMessage: true,//设置允许信息窗发送短息

            //    message: “” + str.toString() + “”

            //};

            //map.openInfoWindow(new BMap.InfoWindow(“地点经纬度:”, optsv), pv); //开启信息窗口

        });

        //国内根据地点名称查找经纬度

        $.ajax({

            type: “GET”,

            url: “../Home/getPoint”,

            data: {},

            dataType: “json”,

            success: function (result) {

                debugger;

                var data = eval(result);

                //alert(data.result.location);

                //alert(data.result.location.lat);

                //alert(data.result.location.lng);

                map.addOverlay(new SquareOverlay(‘7’, “red”, data.result.location.lng, data.result.location.lat));

            }

        });

    </script>

五.后台服务

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Net;

using System.Text;

using System.Web;

using System.Web.Mvc;

namespace BaiduMapJavaScriptAPI.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            ViewBag.Message = “Modify this template to jump-start your ASP.NET MVC application.”;

            return View();

        }

        public ActionResult About()

        {

            ViewBag.Message = “Your app description page.”;

            return View();

        }

        public ActionResult Contact()

        {

            ViewBag.Message = “Your contact page.”;

            return View();

        }

        //注:本次请求为向androidpnserver发送请求实现后台向客户端的消息推送

        public string SentHttpRequest()

        {

            //请求路径

            string url = “http://api.map.baidu.com/geocoder/v2/?address=” + HttpUtility.UrlEncode(“北京市海淀区上地十街10号”) + “&output=json&ak=0XEf3Sbuj9Yu3LGkRvi2ylPaoord65cS&callback=showLocation”;

            //定义request并设置request的路径

            WebRequest request = WebRequest.Create(url);

            //定义请求的方式

            request.Method = “POST”;

            //初始化request参数

            string postData = “action=send&broadcast=Y&uri=112332&username=f8df247d0b2b4277b122f68c94c2caab”;

            postData += “&title=C

            postData += “&message=利用C

            //设置参数的编码格式,解决中文乱码

            byte[] byteArray = Encoding.UTF8.GetBytes(postData);

            //设置request的MIME类型及内容长度

            request.ContentType = “application/x-www-form-urlencoded”;

            request.ContentLength = byteArray.Length;

            //打开request字符流

            Stream dataStream = request.GetRequestStream();

            dataStream.Write(byteArray, 0, byteArray.Length);

            dataStream.Close();

            //定义response为前面的request响应

            WebResponse response = request.GetResponse();

            //获取相应的状态代码

            Console.WriteLine(((HttpWebResponse)response).StatusDescription);

            //定义response字符流

            dataStream = response.GetResponseStream();

            StreamReader reader = new StreamReader(dataStream);

            string responseFromServer = reader.ReadToEnd();//读取所有

            Console.WriteLine(responseFromServer);

            //关闭资源

            reader.Close();

            dataStream.Close();

            response.Close();

            return responseFromServer;

        }

        //国内

        public string getPoint()

        {

            string serviceAddress = “http://api.map.baidu.com/geocoder/v2/?address=” + HttpUtility.UrlEncode(“济南邦德激光股份公司”) + “&output=json&ak=0XEf3Sbuj9Yu3LGkRvi2ylPaoord65cS”;

            // string serviceAddress = “http://222.111.999.444:8687/tttr/usercrd/12/b7e50cb45a?userid=9999”;

            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(serviceAddress);

            request.Method = “GET”;

            request.ContentType = “text/html;charset=UTF-8”;

            HttpWebResponse response = (HttpWebResponse)request.GetResponse();

            Stream myResponseStream = response.GetResponseStream();

            StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.UTF8);

            string retString = myStreamReader.ReadToEnd();

            myStreamReader.Close();

            myResponseStream.Close();

            // return Response.Write(retString);

            return retString;

        }

        /// <summary>

        /// 国外

        /// </summary>

        /// <returns></returns>

        public string waigetPoint()

        {

            string serviceAddress = “http://api.map.baidu.com/place_abroad/v1/search?query=” + HttpUtility.UrlEncode(“东京塔”) + “&page_size=10&page_num=0&scope=1&region=东京&output=json&ak=0XEf3Sbuj9Yu3LGkRvi2ylPaoord65cS”; //GET请求

            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(serviceAddress);

            request.Method = “GET”;

            request.ContentType = “text/html;charset=UTF-8”;

            HttpWebResponse response = (HttpWebResponse)request.GetResponse();

            Stream myResponseStream = response.GetResponseStream();

            StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.UTF8);

            string retString = myStreamReader.ReadToEnd();

            myStreamReader.Close();

            myResponseStream.Close();

            // return Response.Write(retString);

            return retString;

        }

        /// <summary>

        /// 国内地点检索

        /// </summary>

        /// <returns></returns>

        public string guoneigetPoint()

        {

            // string serviceAddress = “http://api.map.baidu.com/place_abroad/v1/search?query=” + HttpUtility.UrlEncode(“东京塔”) + “&page_size=10&page_num=0&scope=1&region=东京&output=json&ak=vEB3tAH66H26QlHyklHZ7A5TUaEqsLX5”; //GET请求

            string serviceAddress = “http://api.map.baidu.com/place/v2/search?query=ATM机&tag=银行&region=北京&output=json&ak=0XEf3Sbuj9Yu3LGkRvi2ylPaoord65cS”;//GET请

            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(serviceAddress);

            request.Method = “GET”;

            request.ContentType = “text/html;charset=UTF-8”;

            HttpWebResponse response = (HttpWebResponse)request.GetResponse();

            Stream myResponseStream = response.GetResponseStream();

            StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.UTF8);

            string retString = myStreamReader.ReadToEnd();

            myStreamReader.Close();

            myResponseStream.Close();

            // return Response.Write(retString);

            return retString;

        }

    }

}

六.附加Demo

百度地图APi详解之数据监控案例详解》来自互联网,仅为收藏学习,如侵权请联系删除。本文URL:https://www.hashtobe.com/700.html