When I try to import mapkitjs using HTML, I use the correct token, but the error token is invalid.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地点信息查询</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f7;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.search-box {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
}
.result-container {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.place-image {
width: 100%;
max-height: 300px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 15px;
}
.place-info {
margin-top: 15px;
}
.place-info h2 {
margin-top: 0;
color: #1d1d1f;
}
.info-item {
margin: 10px 0;
color: #515154;
}
#map {
width: 100%;
height: 300px;
border-radius: 8px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>地点信息查询</h1>
<input type="text" id="searchInput" class="search-box" placeholder="请输入地点名称（如：北京故宫）">
<div class="result-container">
<div id="placeImage"></div>
<div class="place-info">
<h2 id="placeName"></h2>
<div id="placeDetails"></div>
</div>
<div id="map"></div>
</div>
</div>
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<script>
// 初始化 MapKit
mapkit.init({
authorizationCallback: function(done) {
done('mytoken');
},
language: 'zh-CN',
region: 'CN',
callback: function(error) {
if (error) {
console.error('MapKit 初始化错误:', error);
alert('地图服务初始化失败，请检查网络连接和授权设置');
} else {
console.log('MapKit 初始化成功');
}
}
});
// 添加错误处理
window.addEventListener('error', function(event) {
console.error('MapKit 错误:', event.error);
});
const searchInput = document.getElementById('searchInput');
const placeImage = document.getElementById('placeImage');
const placeName = document.getElementById('placeName');
const placeDetails = document.getElementById('placeDetails');
const mapDiv = document.getElementById('map');
let map;
searchInput.addEventListener('input', debounce(searchPlace, 500));
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
async function searchPlace() {
console.log('搜索');
const query = searchInput.value;
if (!query) return;
try {
// 使用 MapKit 搜索地点
const search = new mapkit.Search({
region: new mapkit.CoordinateRegion(
new mapkit.Coordinate(39.9042, 116.4074), // 默认北京坐标
new mapkit.CoordinateSpan(0.1, 0.1)
)
});
search.search(query, (error, data) => {
if (error) {
console.error('搜索错误:', error);
return;
}
if (data.places.length > 0) {
const place = data.places[0];
displayPlaceInfo(place);
showMap(place);
}
});
} catch (error) {
console.error('获取地点信息失败:', error);
}
}
function displayPlaceInfo(place) {
placeName.textContent = place.name;
let detailsHTML = '';
if (place.address) {
detailsHTML += `<p class="info-item">地址: ${place.address}</p>`;
}
if (place.phoneNumber) {
detailsHTML += `<p class="info-item">电话: ${place.phoneNumber}</p>`;
}
if (place.url) {
detailsHTML += `<p class="info-item">网址: <a href="${place.url}" target="_blank">${place.url}</a></p>`;
}
placeDetails.innerHTML = detailsHTML;
// 获取地点图片
if (place.pointOfInterestCategory) {
// 这里可以调用其他图片API来获取地点图片
// 示例使用占位图片
placeImage.innerHTML = `<img src="https://source.unsplash.com/800x400/?${encodeURIComponent(place.name)}" class="place-image" alt="${place.name}">`;
}
}
function showMap(place) {
if (map) {
map.remove();
}
map = new mapkit.Map(mapDiv, {
region: new mapkit.CoordinateRegion(
place.coordinate,
new mapkit.CoordinateSpan(0.01, 0.01)
)
});
const annotation = new mapkit.MarkerAnnotation(place.coordinate, {
title: place.name,
data: { place: place }
});
map.addAnnotation(annotation);
}
</script>
</body>
</html>
