专栏首页赵KK日常技术记录高德地图 HELLO,AMAP!

高德地图 HELLO,AMAP!

今天实在是有点慌啊,慌在不知道看什么啊,翻了半天,还是想看个新东西,本来看数据仓库的,结合买的阿里云也能用起来,但看到技术的时候太偏阿里技术了,要不下午再说吧。

为啥想起来高德地图了呢,前几天群里也说过关于高德区域接口接入的问题,昨天又看到个段子。

高德营业模式我不懂,但是高德肯定会收集用户信息,像这种免费入场,打死一大片竞对的例子太多了,360杀毒软件,前几天上市的WPS,在入场后掌握用户信息,用户行为,开发市场

通过各行各业,根据用户行为精准推送,赚你点钱太容易了吧?所以像360,高德,这种免费入市的产品,是不屑于收费的,当初免费入市就直接搞垮一大批竞对,怎么会收费么。

既然点进来了,就看看API体验下Demo然后做下简单预想。

1.0登录注册

2.0创建应用获取API Key

3.0Hello AMAP

这个demo完全凭Hbuilder就可体验,接入Java代码要再熟悉下API。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
</style>
</head>
<body>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });
    
     //实时路况图层
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
    });

    trafficLayer.setMap(map);

    var isVisible = true;
    function toggle() {
        if (isVisible) {
            trafficLayer.hide();
            isVisible = false;
        } else {
            trafficLayer.show();
            isVisible = true;
        }
    }
    //叠加图层
   /* var map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        layers: [//使用多个图层
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ],
        zooms: [4,18],//设置地图级别范围
        zoom: 13
    });*/
    //点标记与矢量图形
   /*  var marker = new AMap.Marker({
        position:[116.39, 39.9]//位置
    })
    map.add(marker);//添加到地图*/
      var infoWindow = new AMap.InfoWindow({ //创建信息窗体
        isCustom: true,  //使用自定义窗体
        content:'<div>信息窗体</div>', //信息窗体的内容可以是任意html片段
        offset: new AMap.Pixel(16, -45)
    });
    var onMarkerClick  =  function(e) {
        infoWindow.open(map, e.target.getPosition());//打开信息窗体
        //e.target就是被点击的Marke
    } 
    var marker = new AMap.Marker({
         position: [116.481181, 39.989792]
    })
    map.add(marker);
    marker.on('click',onMarkerClick);//绑定click事件
</script>
</body>
</html>

看下效果

这个是带有图层,实时路况,点标记与矢量图形,事件与载体的一个demo,都是入门级别的

API传送门:

https://lbs.amap.com/api/javascript-api/guide/abc/quickstart?from=api-js_api-guide-abc-prepare

这没什么可看的啊,都是JS实现的,想看下java调用Api,点击开发文档,

这里有一个GET请求的URL,在线试下效果

//restapi.amap.com/v3/place/text?keywords=北京大学&city=beijing&output=xml&offset=20&page=1&key=<用户的key>&extensions=all

返回:

{
"status" :
"1",
"count" :
"899",
"info" :
"OK",
"infocode" :
"10000",
"suggestion" :
{ 
"keywords" :
[ ],
"cities" :
[ ]
},
"pois" :
[ 
"0" :
{ 
"id" :
"B000A816R6",
"parent" :
[ ],
"childtype" :
[ ],
"name" :
"北京大学",
"tag" :
[ ],
"type" :
"科教文化服务;学校;高等院校",
"typecode" :
"141201",
"biz_type" :
[ ],
"address" :
"颐和园路5号",
"location" :
"116.310905,39.992806",
"tel" :
"010-62752114",
"postcode" :
[ ],
"website" :
"www.pku.edu.cn",
"email" :
[ ],
"pcode" :
"110000",
"pname" :
"北京市",
"citycode" :
"010",
"cityname" :
"北京市",
"adcode" :
"110108",
"adname" :
"海淀区",
"importance" :
[ ],
"shopid" :
[ ],
"shopinfo" :
"0",
"poiweight" :
[ ],
"gridcode" :
"5916729402",
"distance" :
[ ],
"navi_poiid" :
"J50F001019_500002",
"entr_location" :
"116.315761,39.990097",
"business_area" :
[ ],
"exit_location" :
[ ],
"match" :
"0",
"recommend" :
"3",
"timestamp" :
"2019-12-01 00:22:11",
"alias" :
"PKU|北京大学燕园校区|北大",
"indoor_map" :
"0",
"indoor_data" :
{ … },
"groupbuy_num" :
"0",
"discount_num" :
"0",
"biz_ext" :
{ … },
"event" :
[ ],
"children" :
[ … ],
"photos" :
[ … ]
},

]
}

周边搜索

周边搜索API服务地址:

URL

https://restapi.amap.com/v3/place/around?parameters

请求方式

GET

区域多边形搜索

多边形搜索API服务地址:

URL

https://restapi.amap.com/v3/place/polygon?parameters

请求方式

GET

IP定位

像这种是不是就是天气,当下城市,或者很多用户属性分析的接口,可以根据ip定位相关信息然后再展现应用信息

还有GPS导航根据用户定位异步加载地图区域等

另外开发者提供的配额也是够demo测试用的,单独接口给的次数是6000次每天

可以结合相关API在网站展示同城好友什么的,至于java的demo我还要再研究下,今天就暂时这么多吧。

本文分享自微信公众号 - 赵KK日常技术记录(gh_cc4c9f1a9521)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Mysql查询及高级知识整理(上)

    SQL:Structured Query Language,结构化查询语言。

    疯狂的KK
  • 开源项目Springboot_v2真香系列

    之前找过很多开源项目,用于生成代码,和权限管理,但功能全的需要付费,小功能的项目又不实用,这次的开源项目,功能十分强大,且拿来即用。

    疯狂的KK
  • 开源框架分布式任务调度xxl-job

    XXL-JOB是一个分布式任务调度平台,其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线,开箱即用

    疯狂的KK
  • Echart在Openlayers的应用

    echart,一个由百度前端发起的canvas国产类库(官网:http://echarts.baidu.com/index.html)。echart其实是在ca...

    lzugis
  • Echart在Openlayers的应用-热力图

    在前文中,有一篇文章讲述了Openlayers2结合Echart实现地图统计图,还以一篇文章讲述了结合heatmap.js实现Openlayers中热力图的展示...

    lzugis
  • Arcgis for js,Openlayers中加载GeoJSON

    在前文中,讲述了在JAVA环境下如何将shp转换为GeoJSON,在本文,分别讲述在Arcgis for js,Openlayers2和Openlayers3中...

    lzugis
  • 高考查分小程序开发心得

    明天就是一年一度的高考了,今年的高考报名人数达到了 1031w 的新高,作为一名三年前参考高考的准程序猿,赶在高考前,加班加点从零开始做了一款高考查分小程序,算...

    月小水长
  • 在Go中使用Protobuf

    本教程使用proto3版本的protocol buffer语言,提供了一个基本的在Go程序中使用protocol buffer的介绍。通过创建一个简单的示例应用...

    KevinYan
  • R语言进阶笔记5 | purrr替代循环

    其中,手动for循环我最常用,apply系列半吊子,purrr函数一窍不通,所以要学习一下。

    邓飞
  • ES6系列_12之map数据结构

    JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了能实现将对...

    wfaceboss

扫码关注云+社区

领取腾讯云代金券