bingmap

最新推荐文章于 2023-02-05 20:57:49 发布

fyinthesky

最新推荐文章于 2023-02-05 20:57:49 发布

阅读量880

点赞数

分类专栏： bingmap 文章标签： bingmap

本文链接：https://blog.csdn.net/fyinthesky/article/details/85096407

版权

bingmap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>loadmapasyncHTML</title>
<style type='text/css'>body{margin:0;padding:0;overflow:hidden;font-family:'Segoe UI',Helvetica,Arial,Sans-Serif}</style>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<script type='text/javascript' src='https://cn.bing.com/api/maps/mapcontrol?branch=experimental&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' async defer></script>
<script type='text/javascript'>
var map;
function loadMapScenario() {

/*
Microsoft.Maps.ConfigurableMap.createFromConfig(document.getElementById('myMap'), 'https://bingmapsisdk.blob.core.windows.net/isdksamples/configmap2.json', false, null, successCallback, errorCallback);
function successCallback(mapObj) {
document.getElementById('printoutPanel').innerHTML = 'success';
}
function errorCallback(message) {
document.getElementById('printoutPanel').innerHTML = message;
}
   */

   //
/*
//map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
                   map = new Microsoft.Maps.Map(document.getElementById('myMap'), {


                   //51.50632, -0.12714 london
                   //34.264186, 108.947242 xi'an
center: new Microsoft.Maps.Location(34.264186, 108.947242),
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
//zoom: 10
                   });
       */
           //
           /*
               var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
document.getElementById('printoutPanel').innerHTML =
'<b>Map height</b> <br>' + map.getHeight() + '<br>';
document.getElementById('printoutPanel').innerHTML +=
'<b>Map width</b> <br>' + map.getWidth() + '<br>';
document.getElementById('printoutPanel').innerHTML +=
'<b>Map page x</b> <br>' + map.getPageX() + '<br>';
document.getElementById('printoutPanel').innerHTML +=
'<b>Map page y</b> <br>' + map.getPageY() + '<br>';
document.getElementById('printoutPanel').innerHTML +=
'<b>Map root element</b> <br>' + map.getRootElement().id + '<br>';
                   */

/*
map.setOptions({
maxZoom: 12,
minZoom: 5
});

map.setView({
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center: new Microsoft.Maps.Location(35.027222, -111.0225),
zoom: 15
});
*/

///

//
   /*
document.getElementById('printoutPanel').innerHTML =
'<b>Map center</b> <br>' + map.getCenter() + '<br>';
document.getElementById('printoutPanel').innerHTML +=
'<b>Map bounds</b> <br>' + map.getBounds() + '<br>';
document.getElementById('printoutPanel').innerHTML +=
'<b>Map type id</b> <br>' + map.getMapTypeId() + '<br>';
document.getElementById('printoutPanel').innerHTML +=
'<b>Map zoom level</b> <br>' + map.getZoom() + '<br>';


   */

/*
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { color: 'red' });
map.entities.push(pushpin);

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(),
{ icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
anchor: new Microsoft.Maps.Point(50, 39)
});
map.entities.push(pushpin);

var base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAcBAMAAABmCgnjAAAAFVBMVEVHcEz///8aGhpsuy2s4oDRuPMaADiElDMGAAAAAXRSTlMAQObYZgAAAFNJREFUeF7FkLENgDAQA52GGiIxwD8bPBsgBmD/aXCs6JMNcpWtk1wYx8SO6gO2N3kWtDuJBc39UtYTPEc69BIpTVqLgjJOpS7tQ1I5NyiGia2rHyT7OTg7xhBoAAAAAElFTkSuQmCC';
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(),
{ icon: base64Image,
anchor: new Microsoft.Maps.Point(60, 63)
});
map.entities.push(pushpin);

//var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="25" cy="25" r="20" stroke="orange" stroke-width="4" fill="yellow" /></svg>',
anchor: new Microsoft.Maps.Point(25, 25) });
map.entities.push(pushpin);

// //ARROR/
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
icon: createRedArrow(45),
anchor: new Microsoft.Maps.Point(90, 63)
});
map.entities.push(pushpin);

*/
//svg
/*
var locs = Microsoft.Maps.TestDataGenerator.getLocations(2, map.getBounds());
//Create a blue circle that has a 25 pixel radius as a pushpin and add to map.
var pushpin = createCirclePushpin(locs[0], 25, 'rgba(0, 0, 255, 0.5)');
map.entities.push(pushpin);
//Create a white circle that has a 35 pixel radius and a black outline as a pushpin and add to map.
var pushpin2 = createCirclePushpin(locs[1], 35, 'rgba(255, 255, 255, 0.8)', 'black', 1);
*/
//LABEL
/*
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { text: 'A', title: 'Title', subTitle: 'Subtitle' });
map.entities.push(pushpin);

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { icon: 'https://bingmapsisdk.blob.core.windows.net/isdksamples/defaultPushpin.png',
anchor: new Microsoft.Maps.Point(12, 39) });
map.entities.push(pushpin);

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
anchor: new Microsoft.Maps.Point(30, 65), text: 'X', textOffset: new Microsoft.Maps.Point(0, 5) });
map.entities.push(pushpin);

polygon.setOptions({ fillColor: 'gold', strokeColor: 'navy',
strokeThickness: 3, strokeDashArray: [1, 2] });

       infobox.setMap(null);
           /*
           for (var i = map.entities.getLength() - 1; i >= 0; i--) {
               var polyline = map.entities.get(i);
               if (polyline instanceof Microsoft.Maps.Polyline) {
                   map.entities.removeAt(i);
               }
           }
           */
document.getElementById('printoutPanel').innerHTML =
'Properties of polygon updated.';
}, 4000);

///
var infobox = new Microsoft.Maps.Infobox(center, { title: 'Map Center',
description: 'XI\'AN'
, actions: [{ label: 'Handler1', eventHandler: function () {
alert('Handler1');
}
},
{ label: 'Handler2', eventHandler: function () {
alert('Handler2');
}
},
{ label: 'Handler3', eventHandler: function () {
alert('Handler3');
}
}] });
infobox.setMap(map);

var infoboxTemplate = '<div id="infoboxText" style="background-color:White; border-style:solid; border-width:medium; border-color:DarkOrange; min-height:100px; width: 240px; "><b id="infoboxTitle" style="position: absolute; top: 10px; left: 10px; width: 220px; ">{title}</b><a id="infoboxDescription" style="position: absolute; top: 30px; left: 10px; width: 220px; ">{description}</a></div>';
var infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(center.latitude + 0.1, center.longitude), {
htmlContent: infoboxTemplate.replace('{title}', 'myTitle').replace('{description}', 'myDescription')
});
infobox.setMap(map);

}
function createRedArrow(heading) {
var c = document.createElement('canvas');
c.width = 24;
c.height = 24;
var ctx = c.getContext('2d');
// Offset the canvas such that we will rotate around the center of our arrow
ctx.translate(c.width * 0.5, c.height * 0.5);
// Rotate the canvas by the desired heading
ctx.rotate(heading * Math.PI / 180);
//Return the canvas offset back to it's original position
ctx.translate(-c.width * 0.5, -c.height * 0.5);
ctx.fillStyle = '#f00';
// Draw a path in the shape of an arrow.
ctx.beginPath();
ctx.moveTo(12, 0);
ctx.lineTo(5, 20);
ctx.lineTo(12, 15);
ctx.lineTo(19, 20);
ctx.lineTo(12, 0);
ctx.closePath();
ctx.fill();
ctx.stroke();
// Generate the base64 image URL from the canvas.
return c.toDataURL();
}

function createCirclePushpin(location, radius, fillColor, strokeColor, strokeWidth) {
strokeWidth = strokeWidth || 0;
//Create an SVG string of a circle with the specified radius and color.
var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2),
'" height="', (radius * 2), '"><circle cx="', radius, '" cy="', radius, '" r="',
(radius - strokeWidth), '" stroke="', strokeColor, '" stroke-width="', strokeWidth, '" fill="', fillColor, '"/></svg>'];
//Create a pushpin from the SVG and anchor it to the center of the circle.
return new Microsoft.Maps.Pushpin(location, {
icon: svg.join(''),
anchor: new Microsoft.Maps.Point(radius, radius)
});
}

</script>
</head>
<body οnlοad='loadMapScenario();'>
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>

</body>
</html>

fyinthesky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
bingmap

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;loadmapasyncHTML&lt;/title&gt; &lt;style type='text/css'&gt;body{margin:0;padding:0;overflow:hidden;font-family:'Segoe ...
复制链接

扫一扫