space内に緯度経度が変わる毎に、地理院地図(OpenLayerを使用)を表示しているのですが、
下記のコードを実行すると、spaceが増殖してしまいます。
※増殖バグ回避のコードを実行しても、正常に表示されません
(function() {
'use strict';
var IdoKido = "";
// 緯度経度を球面メルカトル図法に変換
function convertCoordinate(longitude, latitude) {
return ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857');
}
// マーカーを表示するレイヤーを作成
function makeMarkerOverlay(coordinate) {
var imgElement = document.createElement('img');
var imgSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAZCAYAAADe1WXtAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHwSURBVEiJpdW9a9NRFMbxT9qmNWmSRqlFhE6CLuIL1DcUHDqJm/0HBEUk3RQXpW7dXdysWlAEHQSlo4IoIohQKFJQxKWIIlTb5pc2anMdkmBbmleHZ3vul3Pvc865QggaCfu6uIOtTfkbGboYTRIN8yvJd5xoG4psmqk9LH0gBMJTQh+FJOPobAmKo718zbFcrACr+kI4TpThHQYbQhHr4WqG6MkG2FqtEsb5nWQJZ2pCMZDh5RBLc3WAa/WGsIMozV0k1kExnGR+jOKfJoFVLRBGKKT4jL0hBLq51kfhRZ2D04Qblfes5blNKcFynItwYTf5Ug3zc0KyolSlslrgIQpxxiCWYWaC0mbGUUIHASFDeFwD+Kjcbh/RWX3Tw1mixTYrzRP6iXBsXfppHl6m2M6bXqLYx4PNWmpnguhTi+m/L99iEf2bNn8P108RtQI9Qj5Ort5Ebenl27MmgfcoZZhFR93Zx8gu8o2GYIGQLYdzqKmFkuHtTVbrQXOsZJhsZUvtT1P4UQM4/S+cbS3t0xSTOVY2AkuEA+Q7Od/Okt6eID+7ATpRDmcGsba+k26unCRfBc6XRzXCwba+k0q18RRzUxXoOZZT3Kp3piG0Aj49SP41IcFPZP8bWmmxVwOsxDjbjL8pKPZ3c79eOGv1F5xHWAKxXNwiAAAAAElFTkSuQmCC';
imgElement.setAttribute('src', imgSrc);
var markerOverlay = new ol.Overlay({
element: imgElement,
position: coordinate,
positioning: 'center-center'
});
return markerOverlay;
}
// 地図を表示し、ピンを立てる
function setPin(space) {
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [
new ol.Attribution({
html: "<a href='[http://maps.gsi.go.jp/development/ichiran.html](http://maps.gsi.go.jp/development/ichiran.html)' target='_blank'>地理院タイル</a>"
})
],
url: "[http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png](http://cyberjapandata.gsi.go.jp/xyz/std/%7Bz%7D/%7Bx%7D/%7By%7D.png)",
projection: "EPSG:3857"
})
})
],
target: 'map',
view: new ol.View({
zoom: 16
})
});
if(IdoKido !== "" && IdoKido !== null && IdoKido !== undefined){
var Ido = 0;
var Kdo = 0;
const c1 = IdoKido.split(",");
for (let i = 0; i < c1.length; i++) {
if(i === 0){
Ido = c1[i].trim();
}
else
{
Kdo = c1[i].trim();
}
}
//経度と緯度を変換
let coordinate = convertCoordinate(Number(Kdo), Number(Ido));
//マーカーの作成
let marker = makeMarkerOverlay(coordinate);
//マップにマーカを追加する
map.addOverlay(marker);
map.getView().setCenter(convertCoordinate(Number(Kdo), Number(Ido)));
}
else
{
//経度と緯度を変換
let coordinate = convertCoordinate(140.882137,38.261294);
//マーカーの作成
let marker = makeMarkerOverlay(coordinate);
//マップにマーカを追加する
map.addOverlay(marker);
map.getView().setCenter(convertCoordinate(140.882137,38.261294));
}
}
kintone.events.on(['app.record.index.show','app.record.create.show','app.record.detail.show', 'app.record.edit.show',
'app.record.index.change.緯度経度','app.record.create.change.緯度経度', 'app.record.edit.change.緯度経度',
'app.record.index.edit.change.緯度経度'], function(event) {
/*
//追加したいスペースを指定して、nullチェック(増殖バグ防止)
if (document.getElementById('map') !== null) {
return;
}
*/
var record = event.record;
IdoKido = record["緯度経度"].value;
var space = kintone.app.record.getSpaceElement('map');
$(space).append('<div id="map" style="width:400px; height:400px"></div>');
setPin(space);
});
！