英文:
Javascript - use value from array for map icon colour
问题
我正在使用Apple MapKit JS创建自定义地图，地图图标和标注的数据来自数组。这部分工作得很好，但所有标记图标都使用相同的颜色。我正在使用Apple网站上的自定义标注示例，它在这里设置颜色的值：
// 地标标注
var annotations = sanFranciscoLandmarks.map(function(landmark) {
var annotation = new mapkit.MarkerAnnotation(landmark.coordinate, {
callout: landmarkAnnotationCallout,
color: "#c969e0"
});
annotation.landmark = landmark;
return annotation;
});
我已经修改了数组，包括一个markerColor值，并希望能引用它来指定标记图标的颜色值：
// 地标数据
var sanFranciscoLandmarks = [
{ coordinate: new mapkit.Coordinate(37.7951315, -122.402986), title: "Transamerica Pyramid", phone: "+1-415-983-5420", url: "http://www.transamericapyramidcenter.com/", markerColor: "#c969e0" },
{ coordinate: new mapkit.Coordinate(37.7954201, -122.39352), title: "Ferry Building", phone: "+1 (415) 983-8030", url: "http://www.ferrybuildingmarketplace.com", markerColor: "#FF0000" },
{ coordinate: new mapkit.Coordinate(37.7785538, -122.514035), title: "Cliff House", phone: "+1 (415) 386-3330", url: "http://www.cliffhouse.com/", markerColor: "#00FFFF" }
];
我尝试修改这一行：
color: "#c969e0"
为：
color: annotation.landmark.markerColor
这不起作用，会在浏览器控制台中生成TypeError: undefined is not an object (evaluating 'annotation.landmark')。是否可以动态引用数组中的markerColor值来设置标记颜色？
英文:
I'm creating a custom map using Apple MapKit JS and the data for the map icons and callouts is coming from an array. This is working well but all marker icons use the same colour. I'm using the Custom Callout example from the Apple website where it sets the value for the colour here:
// Landmarks annotations
var annotations = sanFranciscoLandmarks.map(function(landmark) {
var annotation = new mapkit.MarkerAnnotation(landmark.coordinate, {
callout: landmarkAnnotationCallout,
color: "#c969e0"
});
annotation.landmark = landmark;
return annotation;
});
I've modified the array to include a markerColor value as well and was hoping I could reference that to specify the value for the marker icon colour:
// Landmarks data
var sanFranciscoLandmarks = [
{ coordinate: new mapkit.Coordinate(37.7951315, -122.402986), title: "Transamerica Pyramid", phone: "+1-415-983-5420", url: "http://www.transamericapyramidcenter.com/", markerColor: "#c969e0" },
{ coordinate: new mapkit.Coordinate(37.7954201, -122.39352), title: "Ferry Building", phone: "+1 (415) 983-8030", url: "http://www.ferrybuildingmarketplace.com", markerColor: "#FF0000" },
{ coordinate: new mapkit.Coordinate(37.7785538, -122.514035), title: "Cliff House", phone: "+1 (415) 386-3330", url: "http://www.cliffhouse.com/", markerColor: "#00FFFF" }
];
I've tried modifying this line:
color: "#c969e0"
to:
color: annotation.landmark.markerColor
which doesn't work and generates a TypeError: undefined is not an object (evaluating 'annotation.landmark') in the browser console.
Is it possible to dynamically reference the marker colour from the markerColor value from the array?
答案1
得分: 0
使用 color: landmark.markerColor 解决了这个问题。
英文:
Using color: landmark.markerColor resolved this for me.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论