无法使用 Bing Map V7 添加带有选项的图钉答案

【问题标题】：Unable to add Pushpins with Options with Bing Map V7无法使用 Bing Map V7 添加带有选项的图钉
【发布时间】：2015-01-21 21:50:23
【问题描述】：

我能够使用http://www.bingmapsportal.com/ISDK/AjaxV7#Pushpins4 的 Bing Maps V7 交互式 SDK 添加七个编号的图钉。

代码已复制到我们的网站，但地图没有显示七个编号的图钉，而是完全缩小了，没有图钉。如何让地图正确显示？

这是当前的代码：

  <script type="text/javascript">
  var map = null;

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

  function addPushpinWithOptions()
  {
    map.entities.clear(); 
    var offset = new Microsoft.Maps.Point(0, 5);
    var pushpinOptions = {icon: virtualPath + '/Content/poi_custom.png', text : '1', visible: true, textOffset: offset}; 
    var pushpin= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.597619, -104.803023), pushpinOptions);
    var pushpinOptions2 = {icon: virtualPath + '/Content/poi_custom.png', text : '2', visible: true, textOffset: offset}; 
    var pushpin2= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(38.835701,-104.823429), pushpinOptions2);
    var pushpinOptions3 = {icon: virtualPath + '/Content/poi_custom.png', text : '3', visible: true, textOffset: offset}; 
    var pushpin3= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.686367, -104.942632), pushpinOptions3);
    var pushpinOptions4 = {icon: virtualPath + '/Content/poi_custom.png', text : '4', visible: true, textOffset: offset}; 
    var pushpin4= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(40.525520,-105.026337), pushpinOptions4);
    var pushpinOptions5 = {icon: virtualPath + '/Content/poi_custom.png', text : '5', visible: true, textOffset: offset}; 
    var pushpin5= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.710943,-105.085228), pushpinOptions5);
    var pushpinOptions6 = {icon: virtualPath + '/Content/poi_custom.png', text : '6', visible: true, textOffset: offset}; 
    var pushpin6= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.535295,-104.882056), pushpinOptions6);
    var pushpinOptions7 = {icon: virtualPath + '/Content/poi_custom.png', text : '7', visible: true, textOffset: offset}; 
    var pushpin7= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.964544,-105.163545), pushpinOptions7);
    map.setView( {center: new Microsoft.Maps.Location(39.786367, -105.142632), zoom: 8}); 
    map.entities.push(pushpin);
    map.entities.push(pushpin2);
    map.entities.push(pushpin3);
    map.entities.push(pushpin4);
    map.entities.push(pushpin5);
    map.entities.push(pushpin6);
    map.entities.push(pushpin7);
  }
  </script>

【问题讨论】：

您能否再添加一些代码。很难判断 addPushpinWithOptions 函数是否被正确调用。

标签： bing-maps pushpin

【解决方案1】：

您是否定义了 virtualPath 参数并在那里有电子邮件？该代码示例通过使用位于 URL“virtualPath + '/Content/poi_custom.png'”的图像来创建图钉。如果您有自己的图像，则将其替换为您自己的 URL。

例如：

var pushpinOptions = {
   icon: 'images/myImage.png', 
   text : '1', 
   textOffset: offset
};

visible 属性默认为 true，因此无需添加。此外，textoffset 属性用于根据需要将自定义文本定位在图像上。这应该是一个 Microsoft.Maps.Point 对象。

例如：

var offset = new Microsoft.Maps.Point(10,20);

在定位自定义图钉图标时，您可能还会发现这篇博文很有用：https://rbrundritt.wordpress.com/2014/10/02/correcting-anchoring-pushpins-to-the-map/

【讨论】：