点击infobox-bing映射api

Onclick infobox - bing map api

本文关键字:api 映射 infobox-bing 点击      更新时间:2023-09-26

我在获取bing API的信息框时遇到问题,以便从地图外点击打开。

这是show infobox函数和创建pin/infobox本身的函数:

function displayInfobox(e) {
pinInfobox.setOptions({
title: e.target.Title,
description: e.target.Description,
visible: true,
offset: new Microsoft.Maps.Point(0, 25)
});
pinInfobox.setLocation(e.target.getLocation());
}
function hideInfobox(e) {
pinInfobox.setOptions({
visible: false
});
}
function displayPinsOnMap(results) {
// Creates a collection to store multiple pins
var pins = new Microsoft.Maps.EntityCollection();
//Create the info box for pushpin
var infoboxOptions = {width: 260, height:160};
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), infoboxOptions);
infoboxLayer.push(pinInfobox);
// Create Pins
for (var i = 0; i < results.length; i++) {
//pushpin location
var position = new Microsoft.Maps.Location(results[i]["Lat"], results[i]["Lon"]);
//Create the pin
if(results[i]["DNC"] == 'DNC') {
var sppins = {htmlContent:"<img src='badsp.png' height='32px'> " };
} else {
var sppins = {htmlContent:"<img src='sppin.png' height='32px'> " };
}
var pin = new Microsoft.Maps.Pushpin(position, sppins);
pin.Title = results[i]["Business Name"];
pin.Description =results[i]["Address"] + "<br>" + 
  results[i]["City"] + ", " +
  results[i]["StateListing"] + "<br>" + 
  results[i]["Phone"] +
  "<br>Fax: " + results[i]["Fax"] +
  "<br>Email: " + results[i]["Email"];
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
function pinclick(i) {
Microsoft.Maps.Events.addHandler(results[i], 'click');
}
//Add pin to the map
map.entities.push(pin);
}
//hide box on map move
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

//add pins/infobox
map.entities.push(pinInfobox);
}

我有一个从JSON文件中提取并显示在地图上的项目列表。每个项目都会创建一个pin和信息框,以及地图旁边的表格。我需要做的是点击表格中的公司名称,打开与该公司相关的信息框。以下是我过去使用Google API的方式——这似乎与Bing的工作方式不同(是的,我必须使用Bing)。

"<td>"+'<a href="#" onclick="javascript:displayInfobox(' + (i) + ');">' + results[i]["Business Name"] +'<'/a>' + "</td>"

看起来你已经从一些代码中复制了displayInfobox函数,当有人点击图钉时,该函数会被触发,因为该函数有以下代码:

pinInfobox.setLocation(e.target.getLocation());

getLocation()方法存在于Bing Maps图钉对象上,但显然不存在于您的图钉对象中,因此当它到达该行时会失败(您使用浏览器调试工具,对吗?)。您需要更改这一行,以便它从某个地方获得信息框的显示位置,方法是将lat-lon作为您的某个属性,并使用这些属性构建一个新的Bing Maps位置对象,或者循环浏览地图上的所有引脚,以找到在某种程度上与您的匹配的引脚