关闭

百度地图LBS云数据自定义麻点

3571人阅读 评论(0) 收藏 举报
分类:

申请sk

  1. 首先去这里注册帐号
    http://developer.baidu.com/map/
  2. 创建应用
    注册后登录,去API控制台
  3. 创建应用
    使用云数据需要创建“服务端”应用
    检验方式选择默认的“IP白名单检验”,如果不想做任何限制直接在输入框里填0.0.0.0/0
  4. 提交后创建完成,可以拿到sk了。在引用api的时候通过ak=带入

创建麻点的云数据

  1. 与创建应用同一界面,选择“数据管理”
  2. 创建数据表,填写表名。成功后会得到一串数字(图中红线覆盖的位置,这是建完表后的效果,mapData是表名),这串数字就是geotableid,在代码中会用到。
  3. 创建麻点
    支持在线创建
    也可以通过csv模板创建,还可以通过post方式存储
    百度API详情链接
    http://api.map.baidu.com/geodata/v3/poi/upload     //  POST请求

应用

  1. 页面中引入api
    < script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A4749739227af1618f7b0d1b588c0e85">
  2. 示例代码
    // 百度地图API功能 
    var map = new BMap.Map("l-map"); // 创建地图实例
    var point = new BMap.Point(116.403694,39.927552); // 创建点坐标
    map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
    var customLayer=new BMap.CustomLayer({
    geotableId: 30960,//换成你自己的数据表geotableId
    q: '', //检索关键字
    tags: '', //空格分隔的多字符串
    filter: '' //过滤条件
    });
    map.addTileLayer(customLayer);
    customLayer.addEventListener('hotspotclick',callback);

    详细示例参考百度示例

麻点样式

目前官方提供自定义的方法,仅提供了可选择样式,一般的需求使用这些样式足够了。
可是很奇怪,亲测后发现样式并不完美

mouseover后

显然mouseover时的样式显示有问题

级别放大后效果

图中所示图标,A类是低级别时显示,B类是高级别时显示(mouseover时也会显示)

用到ionic项目中

api引入和网页没什么不同,但因为涉及到跨域,所以可能需要加白名单whitelist
1. 安装whitelist插件

ionic  plugin add cordova-plugin-whitelist

2. 在config.xml中添加(demo阶段没有任何限制)
< access origin="*" /> 
< allow-navigation href="http:///" />
< allow-navigation href="https:///" />
< allow-navigation href="data:*" />

注意:因为没有设置meta标签的Content-Security-Policy属性,whitelist会抛出错误“No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.”我选择无视了,也继续用下来了,似乎并没有什么影响

同步数据参考

http://www.tuicool.com/articles/jQzUny2

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:56661次
    • 积分:809
    • 等级:
    • 排名:千里之外
    • 原创:16篇
    • 转载:6篇
    • 译文:2篇
    • 评论:17条
    最新评论