์ด๋ฐ ๋ง์ปค์ ๋ผ๋ฒจ์ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ์๋์?
@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
๋ด ํ๋ก์ ํธ์ ๊ตฌํ :
๋ํ ๋ง์ปค ์คํ์ผ์ ์ง์ ํ๊ณ ๋ง์ถค ๋ผ๋ฒจ์ ์ถ๊ฐํ๋ ค๋ฉด "markerwithlabel"Google์ง๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ผํฉ๋๋ค.
https://github.com/googlemaps/v3-utility-library/blob/master/markerwithlabel/src/markerwithlabel.js
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 ๋น์ ์ ๊ทธ๊ฒ์ from bower
Example:
<script src="bower_components/google-maps-utility-library-v3-markerwithlabel/dist/markerwithlabel.js"></script>
And to install it with bower use:
"google-maps-utility-library-v3-markerwithlabel": "^1.1.10"
@ ddctd143 ์ด๊ฒ๋ณด๋ค ์ฐจ์ด๊ฐ ์์ต๋๊น?
<script src="assets/markerwithlabel.js"></script>
์ ์๋ฅผ ์ฌ์ฉํด์ผํฉ๋๊น?
์ด ์คํฌ๋ฆฝํธ๋์ง๋ ์ ์๋ก๋ ๋ ๊ฒ ๊ฐ์ต๋๋ค. ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค. ์ฌ๊ธฐ์ ๋ญ๊ฐ ๋น ์ก๋์?
@bibr
Google์ง๋๋ ๋จผ์ ๊ฐ์ผํฉ๋๋ค.
<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<script src="bower_components/google-maps-utility-library-v3-markerwithlabel/dist/markerwithlabel.js"></script>
๋ฟก ๋นต๋จ
๊ทธ๋ผ ๋์ง๊ฑฐ์ผ
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
Google์ง๋๋ ์ด๋ฏธ angular2-google-maps์ ์ํด๋ก๋๋์์ผ๋ฏ๋ก
@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 ๋น์ ์ ๊ทธ๊ฒ์ ์๋ํ๊ฒ ํ์ต๋๊น?
์ด ๊ธฐ๋ฅ์ผ๋ก ํ ๋ฆฌํ์คํธ ์ถ๊ฐ
์ด ๋ฌธ์ ๋ ์ต๊ทผ ํ๋์ด ์์๊ธฐ ๋๋ฌธ์ ์๋์ผ๋ก ์ค๋๋ ๊ฒ์ผ๋ก ํ์๋์์ต๋๋ค. ๋ ์ด์ ํ๋์ด ๋ฐ์ํ์ง ์์ผ๋ฉด ํ์๋ฉ๋๋ค. ๊ทํ์ ๊ธฐ์ฌ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
๋๋ ์ด๊ฒ์ ์ง๊ธ ๊ตฌํํ๋ ค๊ณ ์๋ํ์ง๋ง ์คํจํ์ต๋๋ค. ๋ฌธ์ ๊ฐ ๋ฐ์ํ๊ฑฐ๋ ์ต์ ๋ฆด๋ฆฌ์ค (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
์ด ๋ฌธ์ ๋ ์ต๊ทผ ํ๋์ด ์์๊ธฐ ๋๋ฌธ์ ์๋์ผ๋ก ์ค๋๋ ๊ฒ์ผ๋ก ํ์๋์์ต๋๋ค. ๋ ์ด์ ํ๋์ด ๋ฐ์ํ์ง ์์ผ๋ฉด ํ์๋ฉ๋๋ค. ๊ทํ์ ๊ธฐ์ฌ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ฌ๊ธฐ์ ํด๊ฒฐ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค. Google์ง๋ API ๋ฌธ์์์ ๋ผ๋ฒจ์ ๋ฌธ์์ด ๋๋ MarkerLabel ๊ฐ์ฒด ์ฌ์์ด ๋ ์ ์์ผ๋ฏ๋ก ๋ผ๋ฒจ์ ๋ฌธ์์ด์ ์ฌ์ฉํ๋ ๋์ MarkerLabel ๊ฐ์ฒด๋ฅผ ์ง์ ํ๊ณ ๋ณ์๋ก ๊ณต๊ธํฉ๋๋ค.
`let markerLabelObject = {
์์ : "๋นจ๊ฐ์",
fontFamily : "๋ชจ๋ ธ ์คํ์ด์ค",
fontSize : "13",
fontWeight : "100",
text : element.names