社区首页 >专栏 >高德地图 HELLO，AMAP！

高德地图 HELLO，AMAP！

疯狂的KK

发布于 2019-12-03 06:27:18

2K00

代码可运行

文章被收录于专栏：Java项目实战Java项目实战

运行总次数：0

代码可运行

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

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

高德营业模式我不懂，但是高德肯定会收集用户信息，像这种免费入场，打死一大片竞对的例子太多了，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" :
[ … ]
},

]
}