I'm trying to use an infobox as a tooltip. I want the infobox to appear at the pushpin the mouse hovers above.
This functionality seems to work fine when the map is sufficiently zoomed in. However when the map is zoomed out - the infobox sometimes appears off the view-port (the infobox behaves as if the map has been translated horizontally).
It's my suspicion that the map is simply wrapping on itself, because it's zoomed out almost all the way. Perhaps this means there are duplicate coordinates on the map canvas, though they're not shown in the view-port.
Pushpins with coordinates that appear only once on the map canvas show the infobox in the correct location.
Can anybody shed some light on this? Any help is appreciated.
I've included a basic version of my code below.
var map; function loadMapScenario() { map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'api key', maxZoom: 2, enableSearchLogo: false, disableBirdseye: true, showDashboard: false, showMapLabel: true, showScalebar: false, disablePanning: true, disableZooming: true, disableKeyboardInput: true, disableMouseInput: false, disableTouchInput: true, disableUserInput: false }); var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds()); var infoBox = new Microsoft.Maps.Infobox(pushpins[0].getLocation(), { title: 'title', description: 'description', showCloseButton: false }); infoBox.setMap(map); for (var i = 0; i < pushpins.length; i++) { var pushpin = pushpins[i]; Microsoft.Maps.Events.addHandler(pushpin, "mouseover", function (e) { infoBox.setLocation(e.target.getLocation()); }); } map.entities.push(pushpins); }
<!DOCTYPE html> <html> <head> <title>Bing Maps Full Width</title> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> </head> <body> <div id='myMap' style='width: 100%; height: 500px;'></div> <script type='text/javascript' src='js/maps.js'></script> <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script> </body> </html>
EDIT
Removing the TestDataGenerator in favour of hard coded coordinate values yields the same problem.
Updated JS:
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'api key',
maxZoom: 2,
disableBirdseye: true,
showDashboard: false,
showMapLabel: true,
showScalebar: false,
disablePanning: true,
disableZooming: true
});
var pushpins = [
new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, -79.08), null),
new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, 108.51), null),
new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, 95.03), null),
new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, -134.58), null)
];
There is a known issue with the TestDataGenerator and "world-wrap" when zoomed out all the way. Notice that not all 10 pushpins are displayed on the map. The infobox is being displayed in the correct position, but the pushpin isn't being rendered.
Also, looking through your map options there are a few that aren't needed:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.