J861151939 2022-11-28 20:04 采纳率: 50%
浏览 64
已结题

AZURE创建地图类webapp

问题遇到的现象和发生背景

在azure创建webapp 通过vscode 链接azure 再用vscode编辑webapp
我想做一个地图类的webapp 地图api用的kakaoapi 想把地图中所有药店类的地方做一个标记点
药店类的openapi也有 结合到一起就不行了

用代码块功能插入代码,请勿粘贴截图
<!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 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>

运行结果及报错内容

运行结果只有一个普通的地图 地图上的要点并没有标记点

我想要达到的结果

img

img

  • 写回答

4条回答 默认 最新

  • 游一游走一走 2022-11-28 20:38
    关注

    给个正确的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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 12月7日
  • 已采纳回答 11月29日
  • 创建了问题 11月28日

悬赏问题

  • ¥50 unitywebrequest分段下载导致报错,如何解决?
  • ¥15 错误使用 gretna_GUI_PreprocessInterface>RunBtn_Callback
  • ¥15 WPF如何用Chart绘画出Y轴的左边数据
  • ¥15 pycharm无法查看内置代码
  • ¥15 跑hls xfopencv的例程standalone_hls_axi_example出的错误,csim没问题,c synthesis出的错误
  • ¥15 sqlserver update语句逐行生效
  • ¥20 Windows10系统命令行调用
  • ¥15 php环境如何实现国密SM2相关功能
  • ¥15 关于#单片机#的问题:K210 例程里面提示我iomem.h: No such file or directory
  • ¥15 LSPI算法的大问题