摘要

这次，我们使用高德地图的Web端（JS API），在kintone应用程序上通过输入的地址来自动生成地图。

用到的高德地图服务API

• 地图显示和标注

• 地理编码（获取经纬度）

※此例仅作开发参考，一切商用目的或者其他许可请参考高德相关网站条例。 

完成图像

在这篇技巧文章中，我们使用了kintone应用商店的“顾客列表”应用程序。

打开记录详情页面时，将显示地图。

输入地址后会在地图上自动设置一个标注，并把“公司名称”作为标注名显示在地图上。

打开记录列表页面时，地图将显示在列表页面的顶部。
鼠标放到标注上将显示你设置的“公司名称”。

详细操作如下：

记录详情页面

• 添加记录时，会根据“地址”字段的值获取纬度和经度，并自动保存到经纬度字段中。

• 然后根据纬度/经度信息显示地图，并将“公司名”字段作为标注信息，显示在地图上。

• 更改地址时，会同步更新地图信息。

记录列表页面

• 打开列表页面时，在列表页面顶部显示地图。

• 只有包含纬度/经度的记录才会在地图上显示标注和公司名信息。

程序

提前准备

要使用高德地图的API，您需要获取高德地图的API密钥。

有关详细信息，请参阅高德地图的相关页面。

• 高德地图开发平台

创建kintone应用程序

添加kintone应用程序商店的“顾客列表”应用程序。

有关添加应用程序的方法，请参阅kintone帮助（从应用程序商店添加应用程序）。

添加字段到您的应用程序

请确保以下字段已经添加到应用程序中。

创建JavaScript文件

准备以下JavaScript文件。

·gaode_map_customize.js

/*
 * 高德地图和kintone的整合app
 * Copyright (c) 2018 Cybozu
 *
 * Licensed under the MIT License
 */
(function () {
    'use strict';
    var LAT = 'lat'; // 纬度字段名
    var LNG = 'lng'; // 经度字段名
    var ADDRESS = 'address'; // 住址
    var COMPANYNAME = 'companyname'; // 公司名
    var MAPSPACE = 'Map'; // 空白栏的元素id（展示地图用）
    var icon = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png'; //标注图标
    // 获取经纬度
    function geoLATLNG(event) {
        // 判断是否输入了地址信息
        var record = event.record;
        var gquery = record[ADDRESS].value;
        if (!gquery) {
            return event;
        }
        // 通过地址获取并更新经纬度
        return new kintone.Promise(function (resolve, reject) {
            AMap.plugin('AMap.Geocoder', function () {
                var geocoder = new AMap.Geocoder({
                })
                geocoder.getLocation(gquery, function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        if (result.geocodes) {
                            record[LAT].value = result.geocodes[0].location.lat;
                            record[LNG].value = result.geocodes[0].location.lng;
                        }
                    }
                    else {
                        // event.error = '无法获取经纬度';
                    }
                    resolve(event);
                })
            })
        })
    }
    // 记录详情画面，显示地图
    function showMap(lat, lng, companyName) {
        // 地图的div初始化
        var mapEl_address = document.createElement('div');
        mapEl_address.setAttribute('id', 'map_address');
        mapEl_address.style.width = '600px';
        mapEl_address.style.height = '300px';
        mapEl_address.style['z-index'] = 0;
        // 空白栏替换为地图元素
        var elMap = kintone.app.record.getSpaceElement(MAPSPACE);
        elMap.appendChild(mapEl_address);
        var map = new AMap.Map('map_address', {
            center: [lng, lat],
            zoom: 15
        });
        var marker = new AMap.Marker({
            position: new AMap.LngLat(lng, lat),
            offset: new AMap.Pixel(-10, -10),
            icon: icon, // 添加 Icon 图标 URL
            title: companyName
        });
        map.add(marker);
    }
    // 列表页面的整体地图及标注显示
    function setLocationIndex(event) {
        var latList = [];
        var lngList = [];
        var nameList = [];
        var rec = event.records;
        for (var i = 0; i < rec.length; i++) {
            if (rec[i].lat.value !== undefined && rec[i].lng.value !== undefined) {
                if (rec[i].lat.value.length > 0 && rec[i].lng.value.length > 0) {
                    latList.push(parseFloat(rec[i][LAT].value));
                    lngList.push(parseFloat(rec[i][LNG].value));
                    nameList.push(rec[i][COMPANYNAME].value);
                }
            }
        }
        // 过滤没有设置经纬度的数据
        if (latList.length === 0) {
            return;
        }
        // 列表页面的头部空白部分
        var elAction = kintone.app.getHeaderSpaceElement();
        // 已经存在地图元素时重新初始化
        // ※ 切换页面或者排序时用
        if (document.getElementById('map') !== null) {
            return;
        }
        // 定义地图元素并添加到头部空白部分
        var mapEl = document.createElement('div');
        mapEl.setAttribute('id', 'map');
        mapEl.setAttribute('style', 'width: auto; height: 300px; border: solid 1px #A8A8A8; z-index: 0;');
        elAction.appendChild(mapEl);
        var latlng = 0;
        var map = new AMap.Map('map');
        var markerList = new Array(); // 存放标注点对象的数组
        for (var j = 0; j < latList.length; j++) {
            if (isNaN(latList[j]) === false && isNaN(lngList[j]) === false) {
                if (latlng === 0) {
                    var position = new AMap.LngLat(lngList[j], latList[j]);
                    map.setZoomAndCenter(11, position);
                    latlng = 1;
                }
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(lngList[j], latList[j]),
                    offset: new AMap.Pixel(-10, -10),
                    icon: icon,
                    title: nameList[j]
                });
                markerList.push(marker);
            }
        }
        map.add(markerList);
    }
    // 记录详情页面
    kintone.events.on('app.record.detail.show', function (event) {
        var rec = event.record;
        var lat = rec[LAT].value;
        var lng = rec[LNG].value;
        var companyName = rec[COMPANYNAME].value;
        if (lat == ''|| lng =='')
        {
            return event;
        }
        showMap(lat, lng, companyName);
    });
    // 添加及修改地址信息时，获取经纬度
    kintone.events.on(['app.record.create.submit', 'app.record.edit.submit', 'app.record.index.edit.submit'], function (event) {
        return geoLATLNG(event);
    });
    // 添加编辑地址时，禁用经纬度的编辑
    kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.index.edit.show'], function (event) {
        var record = event.record;
        record[LAT].disabled = true;
        record[LNG].disabled = true;
        return event;
    });
    // 列表页面的地图显示
    kintone.events.on('app.record.index.show', setLocationIndex);
    // // 列表页面编辑时，重载页面
    kintone.events.on('app.record.index.edit.submit.success', function (event) {
        location.reload(true);
    });
})();

JavaScript / CSS文件的应用

PC的JavaScript文件

• https://webapi.amap.com/maps?v=1.4.13&key=您的密钥

• gaode_map_customize.js 

全部设定后，如下所示。

地图显示

地图信息（标注）和 从地址获取纬度/经度

想要实现通过输入地址来显示地图，需要先通过高德的Web服务api来获得具体的经度和纬度。

然后再通过他的JavaScript API来显示地图及标注。

具体的调用次数限制和授权请参考高德地图相关网站。

扩展

你还可以使用高德的自定义地图做出各种炫酷的样式，热力图等等。快通过kintone和高德让你的地图显示和别人不一样吧！

 注意事项

• 本示例代码不保证其运行。

• 我们不为本示例代码提供技术支持。