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

时间:2022-08-30 09:11:26

申请sk

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

创建麻点的云数据

  1. 与创建应用同一界面,选择“数据管理”
    百度地图LBS云数据自定义麻点
  2. 创建数据表,填写表名。成功后会得到一串数字(图中红线覆盖的位置,这是建完表后的效果,mapData是表名),这串数字就是geotableid,在代码中会用到。
    百度地图LBS云数据自定义麻点
  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);

    详细示例参考百度示例

麻点样式

目前官方提供自定义的方法,仅提供了可选择样式,一般的需求使用这些样式足够了。
可是很奇怪,亲测后发现样式并不完美
百度地图LBS云数据自定义麻点
mouseover后
百度地图LBS云数据自定义麻点
显然mouseover时的样式显示有问题
百度地图LBS云数据自定义麻点
级别放大后效果
百度地图LBS云数据自定义麻点
图中所示图标,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