VUE 바이두지도 팁 및 더 많은 노출과 클릭이 실시 마크를 표시

index.html을中加入스크립트
 
<스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "http://api.map.baidu.com/api?v=3.0&ak=2GRZTukOKUxe25P86mqjHuR1mTahwueb"> </ script>

새로운 map.vue 

<템플릿> 
  <DIV ID = "allmap" 
       클래스 = "지도"/> 
</ 템플릿> 

<스크립트> 
/ * * eslint-비활성화 / 


내보내기 기본 { 
  이름 : 'Mapbox', 
  데이터 () { 
    반환 { 
    } 
  } 
  장착 : 함수 () { 
    . nextTick은이 $ (() => { 
      var에 새로운 새로운 BMap.Map지도 = ( "allmap"); //지도, 바인딩 = allmap ID의 초기화 
      VAR을 BMap.Point 새로운 새로운 포인트 = ( 121.48789949, 31.24916171는) // 포인트를 초기화하는 기본 지정된 x, y는 값 
      map.centerAndZoom 요점 (10)의 포인트로지도를 가리 //, 디스플레이에 표시되는 페이지의 중심 줌 레벨 = 10 
      map.enableScrollWheelZoom (); 마우스 스크롤 휠을 열 // 

      , 만약 다수 게재 // 포인트 인터페이스의 후단에 따라 전달 될 수있다 기초 
      [데이터 =하자
        {X : 116.297047, Y : 39.979542 이름 : ' 홍길동'}, 
        {X : 116.321768, Y : 39.88748 이름 : '홍길동'}, 
        {X : 116.494243, Y : 39.756539 이름 "왕 우 '} 
      ] 

      data.forEach ((E, I) => { 
        // 점, X를 만들에 전달 y 값 
        (가) pointNumber = 새로운 새 BMap.Point (EX, EY)하게 

        // 윈도우 오브젝트 작성이   
        하자 정보창 = 새로운 BMap.InfoWindow ( "세계"{ 
          폭 : 150 // 윈도우 정보 폭     
          (100)의 // 윈도우 높이 정보 : 신장     
          "안녕하세요"+ 나 윈도우 타이틀 정보 : // 제목    
        }) 
        // 데이터는 맵 이름에 첨가 
        VAR = BMap.Label 새로운 새 레이블 (e.name는 { 
          오프셋 : 새로운 새 BMap.Size (25 ,. 5) 
        });
        markerFun (pointNumber, 정보창, 라벨) 
      }) 

      기능 markerFun (포인트, 정보창, 라벨) { 
        송출는 = 새로운 새로운 마커 BMap.Marker을 (포인트) 
        Map.addOverlay (마커); //지도에 추가 할 레이블 
        markers.setLabel을 ( 라벨); //이있는 맵 이름에 데이터를 추가 
        클릭 이벤트 // 표시 
        markers.addEventListener ( "클릭", 기능 (이벤트) { 
          map.openInfoWindow (정보창 포인트); // 매개 변수 : 창, 포인트에 따라 포인트 클릭 창에 대응하는 
        }) 
      } 

      현재 위치 얻기 // 
      신규 신규 BMap.Geolocation = () VAR의 위치 정보를 
      {geolocation.getCurrentPosition (함수 (R LT) 
        IF (this.getStatus () == BMAP_STATUS_SUCCESS) {
          var에 MK = 새로운 BMap.Marker (r.point);  
          맵 .addOverlay (MK);
          map.panTo (r.point); 
          // 경고 ( '您的位置:'+ r.point.lng + ','+ r.point.lat); 
        } 다른 { 
          // 경고 (+ this.getStatus를 '실패'()); 
        } 
      }); 

    }) 
  }, 
  방법 : { 

  } 
} 
</ script> 

<스타일> 
.MAP { 
  높이 : CALC (100vh - 126px); 
  폭 : 100 %; 
} 
</ 스타일>