使用svg元素作为bingmap图钉图标

有没有办法将svg元素用作Microsoft.Maps.Pushpin的图标？使用svg元素作为bingmap图钉图标

我创建了一个SVG

元素是这样的：

var fillcolor = "#ff0222"; 
var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
svg1.setAttribute("height",50); 
svg1.setAttribute("width",50); 

var circles = document.createElementNS("http://www.w3.org/2000/svg", "circle"); 
circles.setAttribute("cx",25); 
circles.setAttribute("cy",25); 
circles.setAttribute("r",25); 
circles.setAttribute("fill",fillcolor); 
svg1.appendChild(circles);

来源

2014-09-26 Zay

在Microsoft.Maps.Pushpin有可能设置的选项（PushpinOptions），您可以指定htmlContent属性值你的选择。

参见：http://msdn.microsoft.com/en-us/library/gg427629.aspx

而且ISDK样本：http://www.bingmapsportal.com/isdk/ajaxv7#Pushpins15

的代码应该是这样的启发：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <title>Add pushpin with options</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> 
     <script type="text/javascript"> 
     var map = null; 

     function getMap() 
     { 
     map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'}); 
     } 

     function addCustomPushpin() 
     { 
     var pushpinOptions = {width: null, height: null, htmlContent: "<div style='font-size:12px;font-weight:bold;border:solid 2px;background-color:LightBlue;width:100px;'>Custom Pushpin</div>"}; 
     var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions); 
     map.entities.push(pushpin); 
     } 
     </script> 
    </head> 
    <body onload="getMap();"> 
     <div id='myMap' style="position:relative; width:400px; height:400px;"></div> 
     <div> 
     <input type="button" value="AddCustomPushpin" onclick="addCustomPushpin();" /> 
     </div> 
    </body> 
</html>

来源

2014-09-26 11:27:33

谢谢你，我完全错过htmlContent财产 – Zay 2014-09-26 11:55:31

我在哪里放置SVG对象？/ – 2016-05-25 09:19:08

使用svg元素作为bingmap图钉图标

回答

相关问题