- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个谷歌地图(使用 API V3),我需要在其中设置标记聚类。基本上标记位置是通过 JSON 加载的,它返回问题(1 或 2)、纬度和经度。
我已尝试设置聚类,但 map 上未显示任何内容,即使 JSON 调用实际上返回了点。这是我想到的:
var map;
function myMap(){
var latlng = new google.maps.LatLng(35.94, 14.37);
var mapOptions = {
zoom: 10,
center: latlng,
panControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
zoomControl: true};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
loadMarkers();
}
function loadMarkers() {
var mcOptions = {gridSize: 50, maxZoom: 15};
var issueSevereMarkers = [];
var issueSlightMarkers = [];
markerIssueHigh = new google.maps.MarkerImage("img/icn_issue_high.png",
new google.maps.Size(10.0, 10.0),
new google.maps.Point(0, 0),
new google.maps.Point(5.0, 5.0)
);
markerIssueMedium = new google.maps.MarkerImage("img/icn_issue_medium.png",
new google.maps.Size(10.0, 10.0),
new google.maps.Point(0, 0),
new google.maps.Point(5.0, 5.0)
);
var issuePoints = $.ajax({
type: 'GET',
url: 'http://www.mydomain.com/php/markers.php?&jsoncallback=?',
dataType: 'JSONp',
timeout: 5000,
success: function(data) {
$.each(data, function(i,item){
if (item.Issue == 1) {
// If severely congested
var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
var issueSevereMarker = new google.maps.Marker({'position': latLng});
issueSevereMarkers.push(issueSevereMarker);
} else if (item.Issue == 2) {
// If slightly congested
var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
var issueSlightMarker = new google.maps.Marker({'position': latLng});
issueSlightMarkers.push(issueSlightMarker);
}
});
var markerClusterSevere = new MarkerClusterer(map, issueSevereMarkers);
var issueSlightMarkerCluster = new MarkerClusterer(map, issueSlightMarkers);
},
error: function(data) {
}
});
}
基本上我所做的是从 JSON 获取结果,如果问题是类型 1,我将一个 pin 添加到 issueSevereMarkers 数组,否则我将它添加到 issueSlightMarkers 数组。这应该用标记点加载数组。我不确定我在那里做错了什么。
我遇到的另一个问题是,当标记被分组时,聚类器基本上会返回我想的自定义图标。当我放大并查看单个标记时,如何设置标记以使用 markerIssueHigh 和 markerIssueMedium 图像?
我正在为 V3 使用 Clustere (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html)
最佳答案
要实际使用您的自定义图标,您需要在 google.maps.Marker 中引用它们构造函数
if (item.Issue == 1) {
// If severely congested
var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
var issueSevereMarker = new google.maps.Marker({position: latLng,
icon:markerIssueHigh});
issueSevereMarkers.push(issueSevereMarker);
} else if (item.Issue == 2) {
// If slightly congested
var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
var issueSlightMarker = new google.maps.Marker({position: latLng,
icon:markerIssueMedium});
issueSlightMarkers.push(issueSlightMarker);
}
关于为什么什么都不会出现,看不出有什么明显的,这里是 link与聚类器一起工作的 map (从 XML 而不是 JSON 获取数据)。
这similar question向集群添加自定义标记。
关于javascript - 谷歌地图 - 聚类标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14137117/
leaflet:一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档: https://leafletjs.cn/reference.html 官网(英文): ht
我是一名优秀的程序员,十分优秀!