javascript: bingmap
https://learn.microsoft.com/en-us/bingmaps/getting-started/
https://learn.microsoft.com/zh-cn/azure/azure-maps/migrate-from-bing-maps-web-app
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bing Map营销人员示例</title>
<meta name="Keywords" content="塗聚文，捷為工作室，万年历,万年历查询,黄历,黄历查询，涂聚文，Geovin Du,geovindu" />
<meta name="Description" content="塗聚文，捷為工作室，信息流,物流,人力资源流,资本流的系统解决方案的开发与设计. " />
<meta name="author" content="geovindu,塗聚文,Geovin Du" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/ico" />
<link rel="bookmark" href="favicon.ico" />
<script src="https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario&mkt=zh-cn" async defer></script>
<link href="../lib/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="../lib/chart.js/4.4.8/chart.umd.js"></script>
<link href="../Bootstrap/5.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="loading-overlay" id="loadingOverlay">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">加载中...</span>
</div>
</div>
<div class="container">
<h1>Bing Map营销人员示例</h1>
<div class="stats">
<div class="stat-card">
<h3><i class="fa fa-map-marker text-primary"></i> 总位置数</h3>
<p class="stat-value" id="totalLocations">0</p>
</div>
<div class="stat-card">
<h3><i class="fa fa-users text-success"></i> 覆盖人群</h3>
<p class="stat-value">1,250,000+</p>
</div>
<div class="stat-card">
<h3><i class="fa fa-line-chart text-warning"></i> 转化率</h3>
<p class="stat-value">8.2%</p>
</div>
<div class="stat-card">
<h3><i class="fa fa-calendar text-info"></i> 更新日期</h3>
<p class="stat-value">2025-06-01</p>
</div>
</div>
<div id="mapView"></div>
<div class="chart-container">
<h3>区域表现分析</h3>
<canvas id="performanceChart" height="100"></canvas>
</div>
<div class="location-list" id="locationList">
<h3>重点关注位置</h3>
<div class="text-center text-muted py-5" id="emptyListPlaceholder">
<i class="fa fa-spinner fa-spin fa-3x"></i>
<p>加载位置数据中...</p>
</div>
</div>
</div>
<script src="js/bingmap.js" type="text/javascript"></script>
<script src="../Bootstrap/5.3.6/js/bootstrap.bundle.min.js"></script>
</body>
</html>
// JavaScript Document geovindu,Geovin Du, bingmap.js
// 存储位置数据的全局变量
let locationsData = [];
let map = null;
// 将人流量文本转换为数值以便图表显示
function convertTrafficToValue(traffic) {
const trafficValues = {
'极低': 1,
'低': 2,
'中': 3,
'高': 4,
'极高': 5
};
return trafficValues[traffic] || 3; // 默认返回"中"的值
}
// 从JSON文件加载位置数据
async function loadLocationsData() {
try {
const response = await fetch('city.json');
if (!response.ok) {
throw new Error(`加载数据失败: ${response.status}`);
}
locationsData = await response.json();
// 验证数据格式
if (!Array.isArray(locationsData) || locationsData.length === 0) {
throw new Error('位置数据格式不正确或为空');
}
document.getElementById('totalLocations').textContent = locationsData.length;
return locationsData;
} catch (error) {
console.error('加载位置数据时出错:', error);
alert('加载位置数据失败，将使用示例数据。');
// 使用示例数据作为备选
locationsData = [
{ lat: 39.9042, lng: 116.4074, name: "北京总部", category: "office", traffic: "高", conversionRate: "9.5" },
{ lat: 31.2304, lng: 121.4737, name: "上海分部", category: "office", traffic: "极高", conversionRate: "7.8" },
{ lat: 22.5431, lng: 114.0579, name: "深圳门店", category: "store", traffic: "中", conversionRate: "10.2" },
{ lat: 23.1291, lng: 113.2644, name: "广州门店", category: "store", traffic: "高", conversionRate: "8.7" },
{ lat: 30.5728, lng: 104.0668, name: "成都门店", category: "store", traffic: "中", conversionRate: "9.3" }
];
document.getElementById('totalLocations').textContent = locationsData.length;
return locationsData;
}
}
// 初始化地图
async function loadMapScenario() {
try {
// 显示加载状态
document.getElementById('loadingOverlay').style.display = 'flex';
// 确保Bing Maps API已加载
if (!window.Microsoft || !Microsoft.Maps) {
throw new Error('Bing Maps API未加载');
}
// 加载位置数据
await loadLocationsData();
// 创建地图实例
map = new Microsoft.Maps.Map(document.getElementById('mapView'), {
credentials: 'Aix7pe29g3T4z7VMUlzKp1EotfMka-4wtrBM-Dq_eLrC2XWG7kPzufGtnsXSgXdN',
center: new Microsoft.Maps.Location(35.8617, 104.1954),
zoom: 4,
culture: 'zh-CN', // 设置为中文
region: 'CN' // 设置为中国区域
});
// 等待地图完全加载
await new Promise((resolve, reject) => {
if (map.getRootElement()) {
resolve(map);
} else {
Microsoft.Maps.Events.addHandler(map, 'load', () => resolve(map));
setTimeout(() => reject(new Error('地图加载超时')), 10000);
}
});
// 添加位置点
addSampleLocations();
// 生成位置列表
generateLocationList();
// 初始化图表
initializeChart();
// 隐藏加载状态
document.getElementById('loadingOverlay').style.display = 'none';
} catch (error) {
console.error('初始化地图时出错:', error);
alert('初始化地图时出错: ' + error.message);
document.getElementById('loadingOverlay').style.display = 'none';
}
}
// 添加示例位置点
function addSampleLocations() {
if (!map) {
console.error('地图未初始化');
return;
}
locationsData.forEach(location => {
try {
const pin = new Microsoft.Maps.Pushpin(
/*
new Microsoft.Maps.Location(location.lat, location.lng),
{
title: location.name,
subTitle: location.category === "office" ? "办公地点" : "零售门店",
color: location.category === "office" ? "#0078d4" : "#28a745"
}*/
new Microsoft.Maps.Location(location.lat, location.lng),
{
title: location.name,
subTitle: location.category === "office" ? "办公地点" : "零售门店",
icon: location.category === "office" ? '3.png':'21.png',
anchor: new Microsoft.Maps.Point(12, 39),
text: location.category === "office" ? "公" : "店",
textOffset: new Microsoft.Maps.Point(0, 5)
}
);
// 添加点击事件
Microsoft.Maps.Events.addHandler(pin, 'click', function() {
showInfoWindow(location.lat, location.lng, location);
});
// 将图钉添加到地图
map.entities.push(pin);
} catch (error) {
console.error(`添加位置 ${location.name} 时出错:`, error);
}
});
}
// 生成位置列表
function generateLocationList() {
const locationList = document.getElementById('locationList');
// 清空占位符
document.getElementById('emptyListPlaceholder').remove();
locationsData.forEach(location => {
const item = document.createElement('div');
item.className = 'location-item';
item.setAttribute('data-lat', location.lat);
item.setAttribute('data-lng', location.lng);
item.setAttribute('data-name', location.name);
// 设置交通流量的徽章颜色
let trafficBadgeClass = 'bg-primary';
if (location.traffic === '极高') trafficBadgeClass = 'bg-danger';
else if (location.traffic === '高') trafficBadgeClass = 'bg-warning';
else if (location.traffic === '中') trafficBadgeClass = 'bg-primary';
else if (location.traffic === '低') trafficBadgeClass = 'bg-success';
// 设置转化率的徽章颜色
let conversionBadgeClass = 'bg-success';
const conversionRate = parseFloat(location.conversionRate);
if (conversionRate < 8) conversionBadgeClass = 'bg-warning';
if (conversionRate < 6) conversionBadgeClass = 'bg-danger';
// 设置图标
const iconClass = location.category === 'office' ? 'fa-building' : 'fa-shopping-bag';
item.innerHTML = `
<h4><i class="fa ${iconClass}"></i> ${location.name}</h4>
<p>${location.address || '未提供地址'}</p>
<div class="location-stats">
<span class="badge ${trafficBadgeClass}">人流量: ${location.traffic}</span>
<span class="badge ${conversionBadgeClass}">转化率: ${location.conversionRate}%</span>
</div>
`;
// 添加点击事件
item.addEventListener('click', function() {
const lat = parseFloat(this.getAttribute('data-lat'));
const lng = parseFloat(this.getAttribute('data-lng'));
const name = this.getAttribute('data-name');
// 找到完整的位置对象
const location = locationsData.find(loc => loc.name === name);
// 地图定位到该位置
if (map) {
map.setView({
center: new Microsoft.Maps.Location(lat, lng),
zoom: 12
});
// 显示信息窗口
showInfoWindow(lat, lng, location);
}
});
locationList.appendChild(item);
});
}
// 显示信息窗口
function showInfoWindow(lat, lng, location) {
try {
if (!map) {
console.error('地图未初始化');
return;
}
// 先移除已存在的信息窗口
for (let i = map.entities.getLength() - 1; i >= 0; i--) {
const entity = map.entities.get(i);
if (entity instanceof Microsoft.Maps.Infobox) {
map.entities.removeAt(i);
}
}
// 设置交通流量的徽章颜色
let trafficBadgeClass = 'bg-primary';
if (location.traffic === '极高') trafficBadgeClass = 'bg-danger';
else if (location.traffic === '高') trafficBadgeClass = 'bg-warning';
else if (location.traffic === '中') trafficBadgeClass = 'bg-primary';
else if (location.traffic === '低') trafficBadgeClass = 'bg-success';
// 创建信息窗口
const infobox = new Microsoft.Maps.Infobox(
new Microsoft.Maps.Location(lat, lng),
{
title: location.name,
description: `
<div class="custom-infobox-content">
<div class="mb-3">
<span class="badge ${trafficBadgeClass}">人流量: ${location.traffic}</span>
</div>
<p><strong>转化率:</strong> ${location.conversionRate}%</p>
<p><strong>周边人口:</strong> ${location.population || '未提供数据'}</p>
<p><strong>详细地址:</strong> ${location.address || '未提供地址'}</p>
<p><strong>营业时间:</strong> ${location.hours || '未提供营业时间'}</p>
<p><strong>联系电话:</strong> ${location.phone || '未提供电话'}</p>
</div>
<div class="custom-infobox-footer">
<button class="btn btn-primary btn-sm">查看详细报告</button>
</div>
`,
showCloseButton: true,
maxWidth: 400,
offset: new Microsoft.Maps.Point(0, 20)
}
);
// 将信息窗口添加到地图
map.entities.push(infobox);
} catch (error) {
console.error('显示信息窗口时出错:', error);
}
}
// 初始化图表
function initializeChart() {
try {
const ctx = document.getElementById('performanceChart').getContext('2d');
// 从数据中提取城市名称、人流量和转化率
const cities = locationsData.map(loc => loc.name);
const trafficValues = locationsData.map(loc => convertTrafficToValue(loc.traffic));
const conversionRates = locationsData.map(loc => parseFloat(loc.conversionRate));
// 创建图表
new Chart(ctx, {
type: 'bar',
data: {
labels: cities,
datasets: [
{
label: '人流量 (相对值)',
data: trafficValues,
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
order: 2
},
{
label: '转化率 (%)',
data: conversionRates,
backgroundColor: 'rgba(75, 192, 192, 0.5)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
type: 'line',
yAxisID: 'y1',
order: 1
}
]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
max: 5,
ticks: {
callback: function(value) {
const trafficLabels = ['极低', '低', '中', '高', '极高'];
return trafficLabels[value - 1] || value;
}
},
title: {
display: true,
text: '人流量'
}
},
y1: {
beginAtZero: true,
position: 'right',
max: 15,
title: {
display: true,
text: '转化率 (%)'
},
grid: {
drawOnChartArea: false
}
}
}
}
});
} catch (error) {
console.error('初始化图表时出错:', error);
document.getElementById('performanceChart').parentElement.innerHTML = `
<div class="text-center text-danger py-3">
<i class="fa fa-exclamation-triangle"></i> 图表加载失败: ${error.message}
</div>
`;
}
}
@charset "utf-8";
/* CSS Document geovindu, Geovin Du bingmap.css*/
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#mapView {
height: 400px;
width: 100%;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.stats {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.stat-card {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
flex: 1 1 200px;
}
.chart-container {
margin-top: 20px;
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.location-list {
margin-top: 20px;
}
.location-item {
background: #f9f9f9;
padding: 15px;
margin-bottom: 10px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
cursor: pointer;
transition: background 0.3s;
}
.location-item:hover {
background: #e9e9e9;
}
.custom-infobox {
max-width: 90%;
width: 350px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
overflow: hidden;
}
.custom-infobox-header {
background-color: #0078d4;
color: white;
padding: 10px 15px;
font-weight: bold;
}
.custom-infobox-content {
padding: 15px;
}
.custom-infobox-footer {
padding: 10px 15px;
border-top: 1px solid #eee;
text-align: right;
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）
浙公网安备 33010602011771号