Angular-google-maps: ์ „์ฒด google.maps ๊ฐ์ฒด์— ๋Œ€ํ•œ ์•ก์„ธ์Šค

์— ๋งŒ๋“  2016๋…„ 03์›” 10์ผ  ยท  8์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: SebastianM/angular-google-maps

์•ˆ๋…•ํ•˜์„ธ์š”, ์ง€๊ธˆ๊นŒ์ง€์˜ ์ž‘์—…์„ ์ข‹์•„ํ•˜์ง€๋งŒ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ angular1์˜ google-maps ๊ตฌํ˜„๊ณผ ์œ ์‚ฌํ•œ ์ „์ฒด google.maps ๊ฐ์ฒด์— ๋Œ€ํ•œ ์•ก์„ธ์Šค ๊ถŒํ•œ์„ ๋ถ€์—ฌํ• ๊นŒ์š”? (์—ฌ๊ธฐ ์ฐธ์กฐ : http://angular-ui.github.io/angular-google-maps/#!/api/GoogleMapApi)

google.maps ๊ฐ์ฒด๋ฅผ ๊ฐ€์ ธ ์˜ค๋ฉด ๋‹ค์Œ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒˆ DirectionsRenderer ๋ฐ DirectionsService๋ฅผ ๋งŒ๋“œ๋Š” A1 ์ฝ”๋“œ :

            uiGmapGoogleMapApi.then(function(maps) {
                vm.gmaps = maps;
                vm.map.directionsDisplay = new vm.gmaps.DirectionsRenderer();
                vm.map.directionsService = new vm.gmaps.DirectionsService();
            });

๋˜๋Š” ์ƒˆ LatLng ๊ฐœ์ฒด๋ฅผ ๋งŒ๋“ค๋ ค๋ฉด :

var latlng = new vm.gmaps.LatLng(lat, lng);

์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๊ฐ€๋Šฅํ• ๊นŒ์š”?

ํŽธ์ง‘ : Google ๊ฐ์ฒด๊ฐ€ ์ „ ์„ธ๊ณ„์ ์œผ๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” var latlng = new google.maps.LatLng (lat, lng); ๊ทธ๋Ÿฌ๋‚˜ Google ๊ฐ์ฒด๊ฐ€ ๊ธ€๋กœ๋ฒŒ ๋„ค์ž„ ์ŠคํŽ˜์ด์Šค๋ฅผ ์˜ค์—ผ์‹œํ‚ค๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•˜๋Š” ๊ฒƒ์ด ํ”„๋กœ์ ํŠธ์˜ ๋ชฉํ‘œ๊ฐ€ ์•„๋‹™๋‹ˆ๊นŒ?

EDIT to EDIT : ์ด์ œ LatLngLiteral ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ํ•œ ๊ฐ€์ง€ ๋ฌธ์ œ๋ฅผ ์ฒ˜๋ฆฌ ํ•  ์ˆ˜ โ€‹โ€‹์žˆ์Šต๋‹ˆ๋‹ค.

import {LatLngLiteral} from 'angular2-google-maps/core';

...

var latlng = <LatLngLiteral>{lat: this.latitude, lng: this.longitude};
this.map.setCenter(latlng);
stale discussion / question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์—ฌ๊ธฐ์—์„œ ๋ชจ๋“  ๊ฒƒ์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ดํ•ดํ•˜๊ณ  ์žˆ๋‹ค๋ฉด์ด๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฐ€์žฅ ๊ฐ์ง„ ๋ฐฉ๋ฒ•์€ ์ „์—ญ ๊ฐœ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ์„œ๋น„์Šค๋ฅผ ๊ฐ–๋Š” ๊ฒƒ์ด ์•„๋‹๊นŒ์š”? ์ด๊ฒƒ์€ ํ…Œ์ŠคํŠธ๋ฅผ์œ„ํ•œ ์กฐ๋กฑ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒํ•˜๊ณ  ์ „์—ญ ์˜์กด์„ฑ์„ ํ”ผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  8 ๋Œ“๊ธ€

์•ˆ๋…•ํ•˜์„ธ์š” cviccaro,

google.maps ๊ฐ์ฒด์— ๋Œ€ํ•œ ์•ก์„ธ์Šค ๊ถŒํ•œ์„ ์–ป์œผ๋ ค๋ฉด ์•„๋ž˜ ์–ธ๊ธ‰ ๋œ ์ฃผ์„์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.

https://github.com/SebastianM/angular2-google-maps/issues/139#issuecomment -187343516

@ parmod-arora,

๊ฐ์‚ฌ. ์ง€๋„ ๊ฐœ์ฒด๋ฅผ ๊ฐ€์ ธ ์™”์ง€๋งŒ ์ „์ฒด SDK์˜ API๋ฅผ ์ฐธ์กฐํ–ˆ์Šต๋‹ˆ๋‹ค. DirectionsRenderer ๋ฐ DirectionsService๋Š”์ง€๋„ ๊ฐ์ฒด ์ž์ฒด๊ฐ€ ์•„๋‹ˆ๋ผ google.maps ๋„ค์ž„ ์ŠคํŽ˜์ด์Šค์— ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์ด๊ฒƒ์„ ๋‹ค์‹œ ์ƒ๊ฐํ•  ๋•Œ ์ „์ฒด google.maps ๋„ค์ž„ ์ŠคํŽ˜์ด์Šค์— ๋Œ€ํ•œ ์ง์ ‘ ์•ก์„ธ์Šค๋Š” ์„ค๊ณ„ ์ƒ ์ œ๊ณต๋˜์ง€ ์•Š๊ณ  ๋Œ€์‹  ๊ฐ ๋ž˜ํผ๊ฐ€ ๋‚˜์ค‘์— ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

@cviccaro ,

๋‚ด๊ฐ€ ํ‹€๋ ธ๋‹ค๋ฉด ์ •์ •ํ•˜์‹ญ์‹œ์˜ค. google.maps์— ์•ก์„ธ์Šคํ•˜๊ณ  DirectionsRenderer ๋ฐ DirectionsService ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

declare var google: any;

@Directive({
  selector: 'my-comp',  // <home></home>
})
export class MyComp {
  constructor(private _mapsWrapper:GoogleMapsAPIWrapper){
    _mapsWrapper.getMap().then((m: mapTypes.GoogleMap) => {
      console.log(google.maps);
    });
  }
}

@ parmod-arora ์ •ํ™•ํ•ฉ๋‹ˆ๋‹ค. ์›๋ณธ ๊ฒŒ์‹œ๋ฌผ์— ๋Œ€ํ•œ ํŽธ์ง‘ ๋‚ด์šฉ์„ ์ผ์„ ๋•Œ ๊ธ€๋กœ๋ฒŒ Google ๊ฐ์ฒด๋ฅผ ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ์„ ์•Œ์•˜์œผ๋ฏ€๋กœ ๋‚ด ์งˆ๋ฌธ์ด ์•ฝ๊ฐ„ ๋ฒ—์–ด๋‚ฌ์Šต๋‹ˆ๋‹ค. ์ด ํ”„๋กœ์ ํŠธ๋Š” ๊ฒฐ๊ตญ ์ „์—ญ ๋„ค์ž„ ์ŠคํŽ˜์ด์Šค์—์„œ Google ๊ฐ์ฒด๋ฅผ ์ œ๊ฑฐํ•˜์—ฌ DirectionsRenderer ๋˜๋Š” DirectionsService๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ€์ ธ์˜ฌ ๋ชจ๋“ˆ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๊นŒ?

์ด ํ”„๋กœ์ ํŠธ๋Š” ๊ฒฐ๊ตญ ๊ธ€๋กœ๋ฒŒ ๋„ค์ž„ ์ŠคํŽ˜์ด์Šค์—์„œ Google ๊ฐ์ฒด๋ฅผ ์ œ๊ฑฐํ•ฉ๋‹ˆ๊นŒ?

์•„๋‹ˆ์š”, ์ด๊ฒƒ์€ ํ”„๋กœ์ ํŠธ์˜ ๋ชฉํ‘œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. angular2 / google์ง€๋„์— ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด ์ถ”์ƒํ™” ๋ ˆ์ด์–ด๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. DirectionsRenderer ๋˜๋Š” DirectionsService์™€ ๊ฐ™์€ Google์ง€๋„ API์˜ ํŠน์ • ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Angular 2๋ฅผ์œ„ํ•œ ์ข‹์€ API๊ฐ€ ์–ด๋–ป๊ฒŒ ์ƒ๊ฒผ๋Š”์ง€ ๋…ผ์˜ํ•˜๊ธฐ ์œ„ํ•ด ์ด๊ฒƒ์„ ์—ด์–ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์—์„œ ๋ชจ๋“  ๊ฒƒ์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ดํ•ดํ•˜๊ณ  ์žˆ๋‹ค๋ฉด์ด๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฐ€์žฅ ๊ฐ์ง„ ๋ฐฉ๋ฒ•์€ ์ „์—ญ ๊ฐœ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ์„œ๋น„์Šค๋ฅผ ๊ฐ–๋Š” ๊ฒƒ์ด ์•„๋‹๊นŒ์š”? ์ด๊ฒƒ์€ ํ…Œ์ŠคํŠธ๋ฅผ์œ„ํ•œ ์กฐ๋กฑ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒํ•˜๊ณ  ์ „์—ญ ์˜์กด์„ฑ์„ ํ”ผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š” @cviccaro ๋‹น์‹ ์€ google.maps ๊ฐ์ฒด๊ฐ€ ์ž‘๋™ํ•œ๋‹ค๊ณ  ์–ธ๊ธ‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ์–ด๋–ป๊ฒŒํ–ˆ๋Š”์ง€ ๋ณด์—ฌ ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? GoogleMapsAPIWrapper๋ฅผ ํ†ตํ•ด ์ด๋ฃจ์–ด ์กŒ์Šต๋‹ˆ๊นŒ?

์ด ๋ฌธ์ œ๋Š” ์ตœ๊ทผ ํ™œ๋™์ด ์—†์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ž๋™์œผ๋กœ ์˜ค๋ž˜๋œ ๊ฒƒ์œผ๋กœ ํ‘œ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋” ์ด์ƒ ํ™œ๋™์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š์œผ๋ฉด ํ์‡„๋ฉ๋‹ˆ๋‹ค. ๊ท€ํ•˜์˜ ๊ธฐ์—ฌ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰