web 接入 bind map
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
function loadMapScenario() {
var myStyle1 = {
"elements": {
"water": { "fillColor": "#a1e0ff" },
"waterPoint": { "iconColor": "#a1e0ff" },
"transportation": { "strokeColor": "#aa6de0" },
"road": { "fillColor": "#b892db" },
"railway": { "strokeColor": "#a495b2" },
"structure": { "fillColor": "#ffffff" },
"runway": { "fillColor": "#ff7fed" },
"area": { "fillColor": "#f39ebd" },
"political": { "borderStrokeColor": "#fe6850", "borderOutlineColor": "#55ffff" },
"point": { "iconColor": "#ffffff", "fillColor": "#FF6FA0", "strokeColor": "#DB4680" },
"transit": { "fillColor": "#AA6DE0" }
},
"version": "1.0"
};
var myStyle = {
"version": "1.0",
"settings": {
"landColor": "#0B334D"
},
"elements": {
"mapElement": {
"labelColor": "#FFFFFF",
"labelOutlineColor": "#000000"
},
"political": {
"borderStrokeColor": "#144B53",
"borderOutlineColor": "#00000000"
},
"point": {
"iconColor": "#0C4152",
"fillColor": "#000000",
"strokeColor": "#0C4152"
},
"transportation": {
"strokeColor": "#000000",
"fillColor": "#000000"
},
"highway": {
"strokeColor": "#158399",
"fillColor": "#000000"
},
"controlledAccessHighway": {
"strokeColor": "#158399",
"fillColor": "#000000"
},
"arterialRoad": {
"strokeColor": "#157399",
"fillColor": "#000000"
},
"majorRoad": {
"strokeColor": "#157399",
"fillColor": "#000000"
},
"railway": {
"strokeColor": "#146474",
"fillColor": "#000000"
},
"structure": {
"fillColor": "#115166"
},
"water": {
"fillColor": "#021019"
},
"area": {
"fillColor": "#115166"
}
}
};
var map = new Microsoft.Maps.Map(document.getElementById('map-container'), {
credentials: 'AvaP1SBV9Sq2eaSbCw7MnhRf7IArHPmgIFcaXtFs6K1zbFfzC6iXcZauWmC93pFC',
//mapTypeId: Microsoft.Maps.MapTypeId.road,
allowHidingLabelsOfRoad: true,
showCopyright: false, //显示版权信息
showMapTypeSelector: false,
showMapLabels: false,
zoom: 5,
setLang: 'zh-HK',
view: 'Auto',
style: 'night',
backgroundColor: Microsoft.Maps.Color.fromHex('#00FF00'),
customMapStyle: myStyle,
theme: 'night',
enableClickableLogo: false,
showDashboard: false, //指示是否显示地图导航控件
showScalebar: false,//是否显示比例尺
mapTypeId: Microsoft.Maps.MapTypeId.roadDark,
//theme: Microsoft.Maps.MapStylePickerStyle.DARK, // 设置为RoadLight主题
//center: new Microsoft.Maps.Location(10, 100),
});
var infobox = null;
function addMarker(latitude, longitude, title, description, pid, colour) {
var marker = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude), { color: colour });
if (colour == 'red star') {
marker = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude), { icon: '/content/img/red.png' });
}
infobox = new Microsoft.Maps.Infobox(marker.getLocation(), {
visible: false
});
marker.metadata = {
id: pid,
title: title,
description: description
};
Microsoft.Maps.Events.addHandler(marker, 'mouseover', showInfobox);
Microsoft.Maps.Events.addHandler(marker, 'click', GoMatrix);
infobox.setMap(map);
map.entities.push(marker);
marker.setOptions({ enableHoverStyle: true });
};
function showInfobox(e) {
if (e.target.metadata) {
infobox.setOptions({
location: e.target.getLocation(),
title: e.target.metadata.title,
description: e.target.metadata.description,
visible: true
});
}
}
function GoMatrix(e) {
var s = JSON.stringify(e.target.metadata.title);
s = eval(s);
if (s.indexOf("Hefei") >= 0) {
window.location.href = '/Display/HFCDT';
}
else if (s.indexOf("Taichung") >= 0) {
window.location.href = '/Display/TCCDT';
}
else if (s.indexOf("Tainan") >= 0) {
window.location.href = '/Display/TNCDT';
}
else if (s.indexOf("Wuhan") >= 0) {
window.location.href = '/Display/WHCDT';
}
else if (s.indexOf("Chongqing") >= 0) {
window.location.href = '/Display/CQCDT';
}
else if (s.indexOf("Guangzhou") >= 0) {
window.location.href = '/Display/GZCDT';
}
else if (s.indexOf("Beijing") >= 0) {
window.location.href = '/Display/BJCDT';
}
}
function hideInfobox(e) {
infobox.setOptions({ visible: false });
}
//add markers to map
addMarker(22.99121, 120.18496, 'Tainan,Taiwan', 'CDT TN', 1, '#425CFB');
addMarker(24.363488, 120.846736, 'Taichung,Taiwan', 'CDT TC', 2, '#425CFB');
addMarker(39.904667, 116.408195, 'Beijing,Beijing', 'CDT BJ', 3, '#425CFB');
addMarker(29.55095, 106.51935, 'Chongqing,Chongqing', 'CDT CQ', 4, '#425CFB');
addMarker(31.975764, 117.371529, 'Hefei, Anhui', 'CDT HF', 5, '#425CFB');
addMarker(23.12908, 113.26436, 'Guangzhou, Guangdong', 'CDT GZ', 6, '#425CFB');
addMarker(30.64353, 114.32472, 'Wuhan, Hubei', 'CDT WH', 7, '#425CFB');
addMarker(31.47104, 104.73409, 'Mianyang, Sichuan', 'CDT MY', 8, '#425CFB');
addMarker(30.5919, 104.1958, 'Chengdu, Sichuan', 'CDT CD', 9, 'purple');
addMarker(34.345158, 108.70346, 'Xianyang, Shannxi', 'CDT XY', 10, 'purple');
//Define a custom overlay class that inherts from the CustomOverlay class.
PanningOverlay.prototype = new Microsoft.Maps.CustomOverlay({ beneathLabels: false });
//Define a constructor for the custom overlay class.
function PanningOverlay() {
}
//Implement the onAdd method to set up DOM elements, and use setHtmlElement to bind it with the overlay.
PanningOverlay.prototype.onAdd = function () {
//Create a div that will hold pan buttons.
var container = document.createElement('div');
//container.innerHTML = "<p style=\"color:red;font-style:italic;font-size:large;\" >MT&E Asia</p><p style=\"color:#425CFB;font-style:italic;font-size:large;\">Corning Plant</p>" +
// "<p style=\"color:#800080;font-style:italic;font-size:large;\">Joint Venture</p><p style=\"color:#ffa500;font-style:italic;font-size:large;\">Contract Manufacturing</p>";
container.style.position = 'relative';
container.style.top = '10px';
container.style.left = '10px';
//container.style.width = '200px';
//container.style.backgroundColor = 'white';
this.setHtmlElement(container);
};
//Implement the new custom overlay class.
var overlay = new PanningOverlay();
//Add the custom overlay to the map.
map.layers.insert(overlay);
}
文档地址：
https://learn.microsoft.com/zh-cn/bingmaps/v8-web-control/map-control-api/mapoptions-object
