Angular-google-maps: ๋งˆ์ปค ๋ ˆ์ด๋ธ”

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

์ด๋Ÿฐ ๋งˆ์ปค์— ๋ผ๋ฒจ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์—†๋‚˜์š”?

image

stale discussion / question feature-request

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

์—ฌ๊ธฐ์— ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. Google์ง€๋„ API ๋ฌธ์„œ์—์„œ ๋ผ๋ฒจ์€ ๋ฌธ์ž์—ด ๋˜๋Š” MarkerLabel ๊ฐ์ฒด ์‚ฌ์–‘์ด ๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๋ผ๋ฒจ์— ๋ฌธ์ž์—ด์„ ์‚ฌ์šฉํ•˜๋Š” ๋Œ€์‹  MarkerLabel ๊ฐ์ฒด๋ฅผ ์ง€์ •ํ•˜๊ณ  ๋ณ€์ˆ˜๋กœ ๊ณต๊ธ‰ํ•ฉ๋‹ˆ๋‹ค.
`let markerLabelObject = {
์ƒ‰์ƒ : "๋นจ๊ฐ„์ƒ‰",
fontFamily : "๋ชจ๋…ธ ์ŠคํŽ˜์ด์Šค",
fontSize : "13",
fontWeight : "100",
text : element.names

     }

    this.markers.push({
      lat: element.latitude,
      label:markerLabelObject,
      lng: element.longitude,`

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

@ssypi ์ฃผ์–ด์ง„ ๊ธฐ๋Šฅ ์„ธํŠธ๋กœ๋Š” ์ง€๊ธˆ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์— ๋Œ€ํ•œ ์ฝ”๋“œ ์Šค ๋‹ˆํŽซ์„ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๊ทธ๋Ÿฌ๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์„์ง€ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋˜ํ•œ ์ด๊ฒƒ์„ ์—ฐ๊ตฌํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ํ•€ ์•„์ด์ฝ˜์„ ๋”์šฑ ๋ณ€๊ฒฝํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค!

@SebastianM ์•„์ง์ด ๋ฌธ์ œ๋ฅผ ์ž์„ธํžˆ ์กฐ์‚ฌ ํ•  ์ถฉ๋ถ„ํ•œ ์‹œ๊ฐ„์ด ์—†์—ˆ์ง€๋งŒ ํ•œ ๊ฐ€์ง€ ๊ฐ€๋Šฅ์„ฑ์€ google-maps-utility-library (์†Œ์Šค ๋ฐ ๋ฌธ์„œ / ์˜ˆ์ œ) ๋˜๋Š” ์ด ํฌํฌ ์˜ markerwithlabel์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์–ผํ•๋ณด๊ธฐ์—๋Š” ์‚ฌ์šฉํ•˜๊ธฐ๊ฐ€ ๋‹ค์†Œ ๊ฐ„๋‹จ ํ•ด ๋ณด์ด์ง€๋งŒ์ง€๋„์— ๋Œ€ํ•œ ์ฐธ์กฐ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

@ brian-singer ํ•€ ์•„์ด์ฝ˜์€ ๋งˆ์ปค ์ง€์‹œ๋ฌธ https://angular-maps.com/docs/api/latest/ts/core/SebmGoogleMapMarker-directive.html ์—์„œ iconUrl ์†์„ฑ์„ ์„ค์ •ํ•˜์—ฌ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋งž์Šต๋‹ˆ๋‹ค, iconUrl์ด ํŠธ๋ฆญ์„ํ–ˆ์Šต๋‹ˆ๋‹ค. @alexweber ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

InfoWindow๋Š” ์Šคํƒ€์ผ์„ ์ง€์ •ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋งž์ถค ์ •๋ณด์ฐฝ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ Google Maps infobox ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.
https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js

๋‚ด ํ”„๋กœ์ ํŠธ์˜ ๊ตฌํ˜„ :

screen shot 2016-07-08 at 18 40 56

๋˜ํ•œ ๋งˆ์ปค ์Šคํƒ€์ผ์„ ์ง€์ •ํ•˜๊ณ  ๋งž์ถค ๋ผ๋ฒจ์„ ์ถ”๊ฐ€ํ•˜๋ ค๋ฉด "markerwithlabel"Google์ง€๋„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.
https://github.com/googlemaps/v3-utility-library/blob/master/markerwithlabel/src/markerwithlabel.js

screen shot 2016-07-08 at 18 40 10

angular1 ๋ฐ ๊ธฐ๋ณธ Google์ง€๋„์—์„œ ์ด๊ฒƒ์„ ๊ตฌํ˜„ํ–ˆ์ง€๋งŒ angular2 ์™€์ด ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ๋™์ผํ•œ ๋…ผ๋ฆฌ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ์•„๋‹ˆ๋ฉด angular1์—์„œ์™€ ๊ฐ™์ด googlemaps api๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ?

@ ddctd143 ์—ฌ๊ธฐ์— ์–ธ๊ธ‰ ๋œ ๊ฒƒ์ฒ˜๋Ÿผ์ง€๋„ ๋˜๋Š” ๋งˆ์ปค ๊ตฌ์„ฑ ์š”์†Œ ๋‚ด๋ถ€์— ๋ฐฐ์น˜ ๋œ ์‚ฌ์šฉ์ž ์ง€์ • ๊ตฌ์„ฑ ์š”์†Œ / ์ง€์‹œ๋ฌธ์„ ์‚ฌ์šฉํ•˜์—ฌ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. https://github.com/SebastianM/angular2-google-maps/issues/307#issuecomment -229084829

Styled Map ์šฉ Plunkr์— ์œ„์˜ ์†”๋ฃจ์…˜์„ ํ†ตํ•ฉํ–ˆ์Šต๋‹ˆ๋‹ค.

https://plnkr.co/edit/rv6udUOEedMxJejEpIW1

๊ทธ๋Ÿฌ๋‚˜ ๋งˆ์ปค์— ๋Œ€ํ•ด์„œ๋„ ๋™์ผํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•ด์•ผํ•˜๋ฏ€๋กœ ๋ ˆ์ด๋ธ”๋„ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์Šคํƒ€์ผ์ด ์ง€์ •๋œ ๋งˆ์ปค ์ง€์‹œ๋ฌธ์„ ์‚ฌ์šฉํ•  ๋•Œ ๋งˆ์ปค ์ธ์Šคํ„ด์Šค๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

@alexjeen stackoverflow์— ๋ฌธ์ œ๋ฅผ ๊ฒŒ์‹œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋ช‡ ๋‹ฌ ์ „์—์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ Google์ง€๋„๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚˜๋Š” ๋‹น์‹ ์˜ ์งˆ๋ฌธ์— ๋Œ€๋‹ต ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ฏธ๋ฆฌ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค :
http://stackoverflow.com/questions/40087258/angular2-google-maps-style-marker

stackoverflow์—์„œ @ ddctd143 ๋‹ต๋ณ€์— ๋”ฐ๋ผ MarkerWithLabel์„ ๊ตฌํ˜„ํ•˜๋ ค๊ณ ํ•˜์ง€๋งŒ

@bibr ๋‹น์‹ ์€ ๊ทธ๊ฒƒ์„

@bibr ์ด ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๊นŒ?

@ ryan-morris ์˜ˆ, marker.js ์ „์—์ง€๋„๋ฅผ๋กœ๋“œํ•ด์•ผํ•˜๋ฏ€๋กœ index.html์—์„œ ์ด๊ฒƒ์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

window.onload = function() {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'assets/js/marker.js';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    }

@bibr @ ddctd143 ์˜ค๋ฅ˜ ๋ฐ›๊ธฐ Zone : angular; ๊ฐ’ : ReferenceError : ์ƒˆ MarkerWithLabel์„ ์‚ฌ์šฉํ•  ๋•Œ
`import {Directive, OnInit} from '@ angular / core';
'angular2-google-maps / core'์—์„œ {GoogleMapsAPIWrapper} ๊ฐ€์ ธ ์˜ค๊ธฐ;
import "../scripts/markerwithlabel.js";

const Marker WithLabel์„ ์„ ์–ธ

@์ง€๋ น({
์„ ํƒ๊ธฐ : 'markerlabel-directive'
})

๋‚ด๋ณด๋‚ด๊ธฐ ํด๋ž˜์Šค MarkerLabelDirective๋Š” OnInit {๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

private map: any;
constructor(private gmapsApi: GoogleMapsAPIWrapper) {}
ngOnInit() {
this.gmapsApi.getNativeMap().then(map => {
  // instance of the map.
  this.map = map;
  this.initMap();
});

}

initMap () {
var latLng = new google.maps.LatLng (49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng (49.47805, -123.84716);

 var marker1 = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   raiseOnDrag: true,
   map: this.map,
   labelContent: "$425K",
   labelAnchor: new google.maps.Point(22, 0),
   labelStyle: {opacity: 0.75}
 });

 var marker2 = new MarkerWithLabel({
   position: new google.maps.LatLng(49.475, -123.84),
   draggable: true,
   raiseOnDrag: true,
   map: this.map,
   labelContent: "$395K",
   labelAnchor: new google.maps.Point(22, 0),
   labelStyle: {opacity: 1.0}
 });

 var iw1 = new google.maps.InfoWindow({
   content: "Home For Sale"
 });
 var iw2 = new google.maps.InfoWindow({
   content: "Another Home For Sale"
 });
 google.maps.event.addListener(marker1, "click", function (e) { iw1.open(this.map, this); });
 google.maps.event.addListener(marker2, "click", function (e) { iw2.open(this.map, this); });

}
}`

์—…๋ฐ์ดํŠธ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

์—ฌ๊ธฐ์— ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. Google์ง€๋„ API ๋ฌธ์„œ์—์„œ ๋ผ๋ฒจ์€ ๋ฌธ์ž์—ด ๋˜๋Š” MarkerLabel ๊ฐ์ฒด ์‚ฌ์–‘์ด ๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๋ผ๋ฒจ์— ๋ฌธ์ž์—ด์„ ์‚ฌ์šฉํ•˜๋Š” ๋Œ€์‹  MarkerLabel ๊ฐ์ฒด๋ฅผ ์ง€์ •ํ•˜๊ณ  ๋ณ€์ˆ˜๋กœ ๊ณต๊ธ‰ํ•ฉ๋‹ˆ๋‹ค.
`let markerLabelObject = {
์ƒ‰์ƒ : "๋นจ๊ฐ„์ƒ‰",
fontFamily : "๋ชจ๋…ธ ์ŠคํŽ˜์ด์Šค",
fontSize : "13",
fontWeight : "100",
text : element.names

     }

    this.markers.push({
      lat: element.latitude,
      label:markerLabelObject,
      lng: element.longitude,`

์˜ˆ, ๋ถ€ํƒํ•ฉ๋‹ˆ๋‹ค. MarkerWithLabel์ด ๊ฐˆ ๊ธธ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
https://stackoverflow.com/questions/32467212/google-maps-marker-label-with-multiple-characters

@nelsonBlack ๋งˆ์ปค์˜ ํฌ๊ธฐ๊ฐ€ ์ฆ๊ฐ€ํ•ฉ๋‹ˆ๊นŒ? ์ €์—๊ฒŒ๋Š” ๊ทธ๋ ‡์ง€ ์•Š์•„์„œ๋ณ„๋กœ ๋„์›€์ด๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

@Ammueliza ๋‹น์‹ ์€ ๊ทธ๊ฒƒ์„ ์ž‘๋™ํ•˜๊ฒŒ ํ–ˆ์Šต๋‹ˆ๊นŒ?

์ด ๊ธฐ๋Šฅ์œผ๋กœ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ ์ถ”๊ฐ€

1392 ๋…„

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

๋‚˜๋Š” ์ด๊ฒƒ์„ ์ง€๊ธˆ ๊ตฌํ˜„ํ•˜๋ ค๊ณ  ์‹œ๋„ํ–ˆ์ง€๋งŒ ์‹คํŒจํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๊ฑฐ๋‚˜ ์ตœ์‹  ๋ฆด๋ฆฌ์Šค (1.0.0-beta.5)์— ํฌํ•จ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๊นŒ?
์˜ค๋ฅ˜ : 'agm-marker'์˜ ์•Œ๋ ค์ง„ ์†์„ฑ์ด ์•„๋‹ˆ๋ฏ€๋กœ 'markerWithLabel'์— ๋ฐ”์ธ๋”ฉ ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
PR์˜ ์ฝ”๋“œ๋ฅผ ์ดํ•ดํ•˜๋Š” ํ•œ ์ด๊ฒƒ์„ 'true'๋กœ ์„ค์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ์‹œ๋„ํ–ˆ๋‹ค :
Angular 7 (์•„์ง ์ตœ์‹  ๋ฆด๋ฆฌ์Šค์—์„œ ๊ณต์‹์ ์œผ๋กœ ์ง€์›๋˜์ง€ ์•Š์Œ)
@ agm / [email protected]
[email protected]

๋ˆ„๊ตฐ๊ฐ€์ด ์ž‘๋™ํ•˜๋„๋ก ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๋ ค์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

@pueaau ์ด ์ž‘์—…์„ ์‹œ๋„ํ–ˆ์ง€๋งŒ ๊ฒฝ๋กœ๊ฐ€ ๋ชจ๋‘ https://www.npmjs.com/package/@ajqua/marker -with-label

์˜ฌ๋ฐ”๋ฅธ ๊ฒฝ๋กœ๋กœ ์ƒˆ ์ €์žฅ์†Œ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
https://github.com/braxtondiggs/marker-with-label

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

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