高德云图简单试用体验

来源：互联网发布：淘宝开店代销要钱吗编辑：程序博客网时间：2024/06/05 05:07

操作步骤：

登录网站：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>

2 0