高德云图简单试用体验

最新推荐文章于 2023-11-02 17:46:08 发布

Virgil_Ye

最新推荐文章于 2023-11-02 17:46:08 发布

阅读量6.5k

点赞数 2

分类专栏：地理信息GIS 文章标签：高德地图云图自定义个人

本文链接：https://blog.csdn.net/wildboy2001/article/details/22151515

版权

地理信息GIS 专栏收录该内容

21 篇文章 7 订阅

订阅专栏

操作步骤：

登录网站：http:///yuntu.amap.com
没有注册的朋友，请先注册个账户。
注册完登录

使用向导：

创建一幅地图（比如7-11连锁店分布图）
批量导入数据 or 手工标注（地图右上角有个标注按钮）
修改调整属性或坐标
发布地图

体验分享：

默认字段：序号、经纬度、地址、创建时间、更新时间。
对导入数据的一些要求：
文件限制：支持 .csv 格式、UTF8编码，数据量不超过 10,000 条，文件大小不超过10M、字段总数不超过 40 个。

字段命名规则：以英文字母开头，仅由英文字母、数字、下划线组成，字段名长度不超过20位。
导入数据后的字段映射，提供“经纬度、地址"两种方式

经纬度有项两种类型：GPS（原始数据）、高德坐标/国家坐标（估计是 GCJ-02）
地址定位：地址解析（准确度跟地址填写和匹配不一定太高，需后期手工调整）
索引：可在云图检索API进行模糊搜索，适用于字符型字段。
筛选排序：可在云图存储API和云图检索API进行精确筛选和排序。

开发应用： 门店点展示、检索（麻点图、JavaScript）样例： http://api.amap.com/javascript/guide#cloudlayer

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>叠加云数据图层</title>
<link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【your key】"></script>
<script language="javascript">
var mapObj;
/*
 *初始化地图对象，加载地图
 */
function mapInit(){
    mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(116.39946,39.907629),level:12});    
    addCloudLayer();
}
/*
 *叠加云数据图层
 */
function addCloudLayer() {
    //加载云图层插件
    mapObj.plugin('AMap.CloudDataLayer', function () {
        var layerOptions = { 
            query:{keywords: ''}, 
            clickable:true
        };
        var cloudDataLayer = new AMap.CloudDataLayer('【your tabel id】', layerOptions); //实例化云图层类
        cloudDataLayer.setMap(mapObj); //叠加云图层到地图
        
        AMap.event.addListener(cloudDataLayer, 'click', function (result) {
            var clouddata = result.data;
            var infoWindow = new AMap.InfoWindow({
                content:"<h3><font face=\"微软雅黑\"color=\"#3366FF\">"+ clouddata._name +"</font></h3><hr />地址："+ clouddata._address + "<br />" + "创建时间：" + clouddata._createtime+ "<br />" + "更新时间：" + clouddata._updatetime,
                size:new AMap.Size(0, 0),
                autoMove:true,
                offset:new AMap.Pixel(0,-5)
            });
            
            infoWindow.open(mapObj, clouddata._location);
        });
    });
}
</script>
</head>
<body onLoad="mapInit()">
    <div id="iCenter"></div>
    <div id="info" style="padding:2px 0px 0px 5px;font-size:12px; color:red;height:20px"></div>
</body>
</html>