高德地图 HELLO,AMAP!

举报
赵KK日常技术记录 发表于 2023/06/24 13:45:51 2023/06/24
【摘要】 今天实在是有点慌啊,慌在不知道看什么啊,翻了半天,还是想看个新东西,本来看数据仓库的,结合买的阿里云也能用起来,但看到技术的时候太偏阿里技术了,要不下午再说吧。 为啥想起来高德地图了呢,前几天群里也说过关于高德区域接口接入的问题,昨天又看到个段子。 高德营业模式我不懂,但是高德肯定会收集用户信息,像这种免费入场,打死一大片竞对的例子太多了,360杀毒软件,前几天上市的WPS,在入...

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

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

请在此添加图片描述

    高德营业模式我不懂,但是高德肯定会收集用户信息,像这种免费入场,打死一大片竞对的例子太多了,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我还要再研究下,今天就暂时这么多吧。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。