zoukankan      html  css  js  c++  java
  • 百度地图覆盖物的简单使用

      由于每天工作接触到的东西都在不断增加,但是却缺乏一个系统的记录工具,这样时间久了又要花时间在网上这查查那查查才能捡起来,所以索性开一个博客记录下一下自己的一些操作记录或者心得吧,而且本人是个菜鸟小白,所以就供个人参考和使用。好了,废话不多说,开搞。

      这次我使用到的是百度地图API里的覆盖物(overLay),具体的地址可以参考http://developer.baidu.com/map/jsdemo.htm#c1_1。之前也用过图层(Layer:主要是通过创建应用并在云端存储好数据,最后在页面调取云端的数据进行使用,用到AK和geotableId),但是发现其数据都是存在云端不是很方便,无法实时统计,所以就用覆盖物这个可以直接和本地数据库实时通信的工具。代码参考上面网址的Demo,但是由于只用到点所以把其他图形的覆盖物代码都简略掉了,上自己的极简版代码。

    --------------------------------------------------------------------------------------------------------------------------------

    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          body, html{ 100%;height: 100%;margin:0;font-family:"微软雅黑";}
          #allmap{height:500px;100%;}
        </style>
    
        <!--这个地方ak填写自己申请应用的ak码,都是免费的,具体操作可以看下图-->
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK码"></script>
        <title>添加/删除覆盖物</title>
      </head>
      <body>
        <div id="allmap"></div>
      </body>
    </html>
    <script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");//创建一个地图实例
    var x=[116.404,116.414,116.424];// 测试用的3个点的经度
    var y=[39.915,39.905,39.895];//测试用的3个点的纬度
    
    //其实上面就可以通过发Ajax请求给后端调用数据库来获取一个你的数据的经度数组[]和纬度数组[]
    
    for(var i=0;i<x.length;i++)
    {
      var point = new BMap.Point(x[i],y[i]);//根据经纬度创建地图上的一个点
      map.centerAndZoom(point, 15);//设置范围
      var marker = new BMap.Marker(point); //根据点来创建点状覆盖物
      map.addOverlay(marker);//把这个覆盖物加载到地图上
    }
    </script>

      上面的代码只是实现最基本的显示3个点的功能,其他的功能可参考API加载一些control即可。

    --------------------------------------------------------------------------------------------------------------------------------

      下面记录一下申请应用AppKey(AK)的过程。

      1.首先进入http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5网页并登陆点击“API控制台”,

      2.点击“创建应用“,填写信息

      3.创建成功后就有AK以及id(本应用中没用到但是其他地方有用),就可以使用了!

      添加其他任何功能,可参考API。

  • 相关阅读:
    激活程序进程并显示最前
    ClickOnce 部署 API 以编程方式检查应用程序更新
    管理员权限运行
    扩展支持全选的CheckBox列。
    转 winfrom组件圆角
    转 无边框四周阴影
    转 实现类似QQ的窗体停靠
    关闭ShowDialog的模态窗口
    TextBox 显示横线
    转 无损转换Image为Icon
  • 原文地址:https://www.cnblogs.com/martianShu/p/5844908.html
Copyright © 2011-2022 走看看