답변사항
도메인, 포트, 키가 올바른지 확인 부탁
위에 사진을 드린것과 같이 설정되어있으면 정상적으로 되리라 생각됩니다.
다른 브라우저에서도 동일한 현상인지 확인
크롬 : 오류 / IE11 : 정상조회 / Edge : 정상조회 / Firefox : 정상조회
왜 크롬에서만 안될까요;; 
그래서 제 브라우저 확장프로그램 관련 문제일까 싶어서 Document 쪽 확인해 봤는데
정상적으로 작동합니다…즉, 제 코드 또는 설정 쪽의 문제인것 같은데…
kakaoapi.vue
export default {
name: 'kakaomap',
props: {
apikey: {
type: String
},
level: {
type: Number
},
center: {
type: Object
},
libraries: {
type: Array
}
},
methods: {
loadScript () {
const script = document.createElement('script') /* global kakao */
let kakaourl = 'http://dapi.kakao.com/v2/maps/sdk.js'
let queryString = []
queryString.push('appkey=' + this.apikey)
queryString.push('autoload=' + this.autoload)
if (this.libraries.length > 0) {
queryString.push('libraries=' + this.libraries.join(','))
}
kakaourl += '?' + queryString.join('&')
script.onload = () => kakao.maps.load(this.initMap)
script.src = kakaourl
document.head.appendChild(script)
},
// 맵 initialize
initMap () {
const options = {
center: new kakao.maps.LatLng(this.center.lat, this.center.lng),
level: this.level
}
this.map = new kakao.maps.Map(this.$el, options)
this.initPlaces()
},
// 검색 initialize
initPlaces () {
let ps = new kakao.maps.services.Places()
let kw = '가산동'
ps.keywordSearch(kw, this.placeSearchCB)
},
placeSearchCB (data, status, pagination) {
console.log([data, status, pagination])
}
},
data () {
return {
map: null,
autoload: false
}
},
mounted () {
window.kakao && window.kakao.maps ? this.initMap() : this.loadScript()
}
}
Page1.vue
<Kakaomapapi
:apikey="apikey"
:level.sync="level"
:center.sync="mapCenter"
:libraries="libraries"
:keyword="keyword"
@load="kakaomapOnload"
@selectMarker="selectedMarker"
style="width:100%;height:600px;" ></Kakaomapapi>
import Chicken from '@/data.json'
import Kakaomapapi from '@/components/Kakaoapi'
export default {
name: 'Page1',
components: {
Kakaomapapi
},
methods: {
kakaomapOnload: (callback) => {
// 현재 위치 Center 조회,
// 위치 근처의 데이터 조회
// Center 에 대한 데이터로AJax 조회
if (callback) {
callback(Chicken.positions)
}
},
// 마커선택시 글 목록 데이터 갱신
selectedMarker: (marker, callback) => {
// 해당 영역에 대한 데이터 Ajax로 조회
let options = {
}
let p = new Promise(
function (resolve, reject) {
this.getArticleListJson(options)
}
)
p.then(function (val) {
if (callback) {
callback(val)
}
})
p.catch(() => {
console.log('promise reject')
})
},
getMarkerJson: (options) => {
// Kakaomap Marker 데이터 조회
},
getArticleListJson: (options) => {
// Article List 데이터 조회
}
},
data () {
console.log(process.env)
return {
msg: 'test',
apikey: process.env.API_KEY,
level: 3,
libraries: [
'services',
'clusterer',
'drawing'
],
keyword: '',
// mapCenter: {lat: 33.450701, lng: 126.570667}
mapCenter: {lat: 37.48924942751741, lng: 126.85372827541924}
}
}
}
Page1.vue 에서 kakaoapi.vue 파일을 호출하도록 되어있습니다.
