AZURE创建地图类webapp
问题遇到的现象和发生背景
在azure创建webapp 通过vscode 链接azure 再用vscode编辑webapp
我想做一个地图类的webapp 地图api用的kakaoapi 想把地图中所有药店类的地方做一个标记点
药店类的openapi也有 结合到一起就不行了
用代码块功能插入代码，请勿粘贴截图
html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기title>
head>
<body>
<div id="map" style="width:500%;height:100vh;">div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=8d41e4ac5151c7737e6a4fb12557f127">script>
<script>
var xhr = new XMLHttpRequest();
var url = 'http://apis.data.go.kr/B551182/pharmacyInfoService/getParmacyBasisList'; /*URL*/
var queryParams = '?' + encodeURIComponent('serviceKey') + '='+'PT%2F%2BFFEwk%2Fv1euX9M6yUDQ5ywqaxO1cFQzzee1GwE%2F9jRVYARG8IaZxmT8PQ1r6D12e3BurU7Mad9vM9BfgaLw%3D%3D'; /*Service Key*/
queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /**/
queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('10'); /**/
queryParams += '&' + encodeURIComponent('sidoCd') + '=' + encodeURIComponent('110000'); /**/
queryParams += '&' + encodeURIComponent('sgguCd') + '=' + encodeURIComponent('110019'); /**/
queryParams += '&' + encodeURIComponent('emdongNm') + '=' + encodeURIComponent('신내동'); /**/
queryParams += '&' + encodeURIComponent('yadmNm') + '=' + encodeURIComponent('온누리건강'); /**/
queryParams += '&' + encodeURIComponent('xPos') + '=' + encodeURIComponent('127.0965441345503'); /**/
queryParams += '&' + encodeURIComponent('yPos') + '=' + encodeURIComponent('37.60765568913871'); /**/
queryParams += '&' + encodeURIComponent('radius') + '=' + encodeURIComponent('3000'); /**/
xhr.open('GET', url + queryParams);
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
alert('Status: '+this.status+'nHeaders: '+JSON.stringify(this.getAllResponseHeaders())+'nBody: '+this.responseText);
}
};
xhr.send('');
var mapContainer = document.getElementById("map"), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.659701, 126.773286), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP, // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
//인포윈도우를 표시하는 클로저를 만드는 함수입니다.
function makeOverListener(map, marker, Infowindow) {
return function() {
Infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(Infowindow) {
return function() {
infowindow.close();
};
}
fetch(url)
.then((res) => res.json())
.then((myJson) => {
var markers = [];
const stores = myJson.stores;
for (var i = 0; i < stores.length; i++){
//지도에 마커 생성,표시
var marker = new kakao.maps.Marker({
Position: new kakao.maps.LatLng(
stores[i]["lat"],
stores[i]["lng"]
), //마커 좌표
});
//인포윈도우 생성
var infowindow = new kakao.maps.InfoWindow({
content : stores[i]["name"],
});
markers.push(marker);
kakao.maps.event.addListener(
marker,
"mouseover",
makeOverListener(map, marker, infowindow)
);
kakao.maps.event.addListener(
marker,
"mouseout",
makeOverListener(infowindow)
);
}
clusterer.addMarkers(markers);
});
script>
body>
html>
运行结果及报错内容
运行结果只有一个普通的地图 地图上的要点并没有标记点
我想要达到的结果
给个正确的kakao sdk的apiKey?目前的不对,没法帮助你排查,主要原因是你请求返回的是xml你不能用json解析,你的appkey不对,我盲写了下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</title>
</head>
<body>
<div id="map" style="width:500%;height:100vh;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=8d41e4ac5151c7737e6a4fb12557f127"></script>
<script>
var url = 'http://apis.data.go.kr/B551182/pharmacyInfoService/getParmacyBasisList'; /*URL*/
var queryParams = '?' + encodeURIComponent('serviceKey') + '=' + 'PT%2F%2BFFEwk%2Fv1euX9M6yUDQ5ywqaxO1cFQzzee1GwE%2F9jRVYARG8IaZxmT8PQ1r6D12e3BurU7Mad9vM9BfgaLw%3D%3D'; /*Service Key*/
queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /**/
queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('10'); /**/
queryParams += '&' + encodeURIComponent('sidoCd') + '=' + encodeURIComponent('110000'); /**/
queryParams += '&' + encodeURIComponent('sgguCd') + '=' + encodeURIComponent('110019'); /**/
queryParams += '&' + encodeURIComponent('emdongNm') + '=' + encodeURIComponent('신내동'); /**/
queryParams += '&' + encodeURIComponent('yadmNm') + '=' + encodeURIComponent('온누리건강'); /**/
queryParams += '&' + encodeURIComponent('xPos') + '=' + encodeURIComponent('127.0965441345503'); /**/
queryParams += '&' + encodeURIComponent('yPos') + '=' + encodeURIComponent('37.60765568913871'); /**/
queryParams += '&' + encodeURIComponent('radius') + '=' + encodeURIComponent('3000'); /**/
var mapContainer = document.getElementById("map"), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.659701, 126.773286), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨
mapTypeId: kakao.maps.MapTypeId.ROADMAP, // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
//인포윈도우를 표시하는 클로저를 만드는 함수입니다.
function makeOverListener(map, marker, Infowindow) {
return function () {
Infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(Infowindow) {
return function () {
infowindow.close();
};
}
fetch(url + queryParams)
.then((res) => res.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(data => {
var markers = [];
let elementsByTagName = data.getElementsByTagName('item');
for (let i = 0; i < elementsByTagName.length; i++) {
let yadmNm = elementsByTagName[i].getElementsByTagName('yadmNm')[0].textContent;
let XPos = elementsByTagName[i].getElementsByTagName('XPos')[0].textContent;
let Ypos = elementsByTagName[i].getElementsByTagName('YPos')[0].textContent;
var marker = new kakao.maps.Marker({
Position: new kakao.maps.LatLng(
XPos,
Ypos
), //마커 좌표
});
var infowindow = new kakao.maps.InfoWindow({
content: yadmNm,
});
kakao.maps.event.addListener(
marker,
"mouseover",
makeOverListener(map, marker, infowindow)
);
kakao.maps.event.addListener(
marker,
"mouseout",
makeOverListener(infowindow)
);
markers.push(marker);
}
clusterer.addMarkers(markers);
});
</script>
</body>
</html>
药店类的openapi也有 结合到一起就不行了
这里具体是什么情况？我怀疑没有前面说的那么复杂，
说不定只是简单的权限问题导致。
参考一下
如何使用 Azure Maps Web 地图控件 - Microsoft Azure Maps | Microsoft Learn
VScode一行代码构建WebApp
https://blog.csdn.net/weixin_42321075/article/details/112716957