在数据层上手动打开InfoWindow(GeoJSON）
Open InfoWindow Manually on Data Layer ( GeoJSON )
我试图触发对标记的点击，但在将数据传递给google.maps.event.trigger（）时遇到问题。我正在从map.data中获取一个功能，并将其传递给google/maps.event.Triger（），但信息窗口没有打开。
google.maps.event.trigger（map.data，'click'）可以工作，但它不针对特定的标记。
任何建议或解决方案都会有所帮助。
感谢
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(-16.166667, 33.60000000000002),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(mapCanvas, mapOptions)
map.data.loadGeoJson('locations.geojson');
function setProps(){
map.data.setStyle(function(feature) {
var color = false;
if (feature.getProperty('propVisible')) {
color = feature.getProperty('propVisible');
}
return {
icon: feature.getProperty('icon').iconUrl,
category: feature.getProperty('projectCat'),
visible: color,
};
});
}
setProps();
var infoWindow = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0, -50)});
map.data.addListener('click', function(event) {
console.log(event);
map.setCenter(event.latLng);
map.setZoom(15);
var projectTitle = event.feature.getProperty("projectTitle");
var imgStr = event.feature.getProperty("projectImages");
var projectImages = new Array();
projectImages = imgStr.split(',');
var projectCat = event.feature.getProperty("projectCat");
var projectPhase = event.feature.getProperty("projectPhase");
var projectSDate = event.feature.getProperty("projectSDate");
var projectEDate = event.feature.getProperty("projectEDate");
var projectDeveloper = event.feature.getProperty("projectDeveloper");
var projectInvestor = event.feature.getProperty("projectInvestor");
var projectTeam = event.feature.getProperty("projectTeam");
var projectTenants = event.feature.getProperty("projectTenants");
var projectWebsite = event.feature.getProperty("projectWebsite");
var thePopup = '<div class="leaflet-popup-content-wrapper">';
thePopup += '<h5>'+projectTitle+'</h5>';
for (i = 0; i < projectImages.length; i++) {
thePopup += '<img src="' + projectImages[i] + '" alt="" style="width:100px;height:100px;cursor:pointer;" data-lity />';
}
thePopup += '<div>Project Category: '+projectCat+'</div>';
thePopup += '<div>Project Phase: ' + projectPhase + '</div>';
thePopup += '<div>Start Date: ' + projectSDate + '</div>';
thePopup += '<div>End Date: ' + projectEDate + '</div>';
thePopup += '<div>Project Developer: ' + projectDeveloper + '</div>';
thePopup += '<div>Project Investor: ' + projectInvestor + '</div>';
thePopup += '<div>Professional Team: ' + projectTeam + '</div>';
thePopup += '<div>Key Tenants: ' + projectTenants + '</div>';
thePopup += '<div>Website: <a href="' + projectWebsite + '" target="_blank">Click Here</a></div>';
thePopup += '</div>';
//console.log(event);
infoWindow.setContent(thePopup);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
});
var listings = document.getElementById('film_roll');
setTimeout(function() {
map.data.forEach(function (feature) {
var projectTitle = feature.getProperty('projectTitle');
var listIcon = feature.getProperty('listIcon');
var projectCountry = feature.getProperty('projectCountry');
var listing = listings.appendChild(document.createElement('div'));
listing.className = 'item col-xs-2';
var notifImg = listing.appendChild(document.createElement('div'));
var notifMeta = listing.appendChild(document.createElement('div'));
var notifIcon = notifImg.appendChild(document.createElement('img'));
var link = notifMeta.appendChild(document.createElement('a'));
var Noticountry = notifMeta.appendChild(document.createElement('div'));
link.href = '#';
link.className = 'title';
notifImg.className = 'notification-img';
notifMeta.className = 'notification-meta';
notifIcon.src = notifImg.innHTML = listIcon;
link.innerHTML = projectTitle;
Noticountry.innerHTML = projectCountry;
});
fr = new FilmRoll({ container: '#film_roll', pager: false, next: false, prev: false, hover: false, start_height: '40px', configure_load: true, vertical_center: true });
}, 500);
filterMarkers = function (category) {
map.setZoom(4);
infoWindow.close();
map.data.forEach(function (feature) {
if (feature.getProperty('projectCat') == category || category == 'all') {
feature.setProperty('propVisible', true);
}
else {
feature.setProperty('propVisible', false);
}
});
setProps();
}
showPopupbox = function (link) {
var popupID = link.getAttribute("data-id");
var ourMarker = map.data.getFeatureById(popupID);
//console.log(map.data);
google.maps.event.trigger(ourMarker,'click');
}
}
google.maps.event.addDomListener(window, 'load', initialize);<a id="map-link" data-id="35" onclick="showPopupbox(this);">test</a>google.maps.Data.MouseEvent-回调的预期参数是一个具有单个属性的对象：feature（包含相关功能）。
触发map.data的click-事件，并将此对象作为3个参数传递给触发器：
google.maps.event.trigger(map.data,'click',{feature:ourMarker});
要获取回调中功能（标记）的位置，请使用
event.feature.getGeometry().get()
（其中event是传递给回调的参数）
演示：
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 5,
center: new google.maps.LatLng(1, 1)
}),
infoWindow = new google.maps.InfoWindow({
pixelOffset: new google.maps.Size(0, -36)
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push(
document.getElementById('ctrl')
);
map.data.addListener('click', function(event) {
var feature = event.feature;
infoWindow.setOptions({
position: feature.getGeometry().get(),
map: map,
content: 'my id is ' + feature.getId()
});
});
map.data.addGeoJson({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"id": 35,
"geometry": {
"type": "Point",
"coordinates": [0, 0]
}
}, {
"type": "Feature",
"id": 36,
"geometry": {
"type": "Point",
"coordinates": [1, 1]
}
}, {
"type": "Feature",
"id": 37,
"geometry": {
"type": "Point",
"coordinates": [2, 2]
}
}]
});
window.showPopupbox = function(link) {
var popupID = link.getAttribute("data-id");
var ourMarker = map.data.getFeatureById(popupID);
google.maps.event.trigger(map.data, 'click', {
feature: ourMarker
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
a {
cursor: pointer;
}
ul {
background: #fff;
}<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>
<ul id="ctrl">
<li><a data-id="35" onclick="showPopupbox(this);">35</a>
</li>
<li><a data-id="36" onclick="showPopupbox(this);">36</a>
</li>
<li><a data-id="37" onclick="showPopupbox(this);">37</a>
</li>
<ul>相关文章：
- 边栏按钮和infoWindow是否可能有不同的内容
- 如何使用传单pip插件与纯GeoJSON数据
- 使用AJAX调用将GeoJSON数据拉入传单
- Mapbox JS，来自URL的GeoJSON featureCollection对象只添加了一个标记
- 使用D3.js和GeoJson在地图上的某些坐标上设置一个小图像
- 从传单数据到GeoJSON的多边形
- 用于在ng映射中加载GeoJSON的回调
- 谷歌地图infowindow错误f=未定义的infowindow.js
- 使用D3.js和GeoJson在地图上显示States上的一些文本
- JS，使用geojson在googleapi中将标记显示为字符串
- 在传单上绘制GeoJSON
- 使用传单和geoJson监控对象
- 更新GeoJSON元素
- 基于唯一ID合并geojson
- Mapbox，无法在jquery回调中设置GeoJSON
- 如何避免传单javascript库中多个MultiPolygon GeoJSON层重叠
- infoWindow在谷歌地图上的多个标记
- d3.js，是否可以将超链接附加到GeoJSON文件
- 在数据层上手动打开InfoWindow(GeoJSON）
- 谷歌地图Api, GeoJson和InfoWindow
