无法使用Bing Map V7添加带有选项的Pushpins

时间:2015-01-21 21:50:23

标签: bing-maps pushpin

我可以在http://www.bingmapsportal.com/ISDK/AjaxV7#Pushpins4使用Bing Maps V7 Interactive 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>

1 个答案:

答案 0 :(得分:1)

您是否定义了virtualPath参数并在那里发送了电子邮件?代码示例使用URL&#34; virtualPath +&#39; /Content/poi_custom.png'&#34;中的图像创建图钉。如果您有自己的图片,请将其替换为您自己的网址。

例如:

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/