大佬教程收集整理的这篇文章主要介绍了Azure Maps - IconOptions - image - 'marker-green'，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Iconoptions 的图像属性中没有“绿色标记”的内置选项。
我该如何实施？
https://docs.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.iconoptions?view=azure-maps-typescript-latest
您必须将图像添加到地图图像精灵中。有适用于所有内置图标等的模板，如下所示：https://azuremapscodesamples.azurewebsites.net/?sample=All%20built-in%20icon%20templates%20as%20symbols
您可以将模板加载到地图中并将其显示在符号图层中，如下例所示：https://azuremapscodesamples.azurewebsites.net/?sample=Symbol%20layer%20with%20built-in%20icon%20template
这是使用“标记”图标模板并赋予其绿色的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Symbol layer with built-in icon template - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico"/>
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script type='text/javascript'>
var map,datasource;
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('mymap',{
view: 'Auto',//Add authentication details for connecTing to Azure Maps.
authOptions: {
authType: 'subscriptionKey',subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready',function () {
//Create a data source to add your data to.
datasource = new atlas.source.Datasource();
map.sources.add(datasourcE);
//Add a point to the center of the map.
datasource.add(new atlas.data.Point([0,0]));
//Create an icon from one of the built-in templates and use it with a symbol layer.
map.imageSprite.createFromTemplate('myTemplateDicon','marker','green','#fff').then(function () {
//Add a symbol layer that uses the custom created icon.
map.layers.add(new atlas.layer.SymbolLayer(datasource,null,{
iconOptions: {
image: 'myTemplateDicon'
}
}));
});
});
}
</script>
</head>
<body onload="GetMap()">
<div id="mymap" style="position:relative;width:100%;height:600px;"></div>
</body>
</html>
以上是大佬教程为你收集整理的Azure Maps - IconOptions - image - 'marker-green'全部内容，希望文章能够帮你解决Azure Maps - IconOptions - image - 'marker-green'所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。