我目前正在开发一个使用谷歌地图的Angular2项目。
我正在尝试在区域周围显示标记和多个标记。 我已经让地图工作但似乎无法标记。
<div class="google-maps"></div>
constructor(private _elementRef:ElementRef) {
}
ngAfterViewInit() {
let el = this._elementRef.nativeElement.querySelector('.google-maps');
GoogleMapsLoader.load((google) => {
let myLatlng = new google.maps.LatLng(44.5403,-78.5463);
new google.maps.Map(el, {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
new google.maps.Marker(el,{
draggable: true,
animation: google.maps.Animation.DROP,
position: myLatlng,
title:"Hello World!"
});
});
}
答案 0 :(得分:2)
尝试此代码,这项工作我的项目
Google官方文档here
import GoogleMapsLoader from 'google-maps';
import { google } from 'google-maps';
ngAfterViewInit() {
let el = this._elementRef.nativeElement.querySelector('.contact-us');
GoogleMapsLoader.KEY = 'g4554645645645645645646';
GoogleMapsLoader.load((google) => {
let myLatlng = new google.maps.LatLng(23.5454, 90.8785);
let map = new google.maps.Map(el, {
center: new google.maps.LatLng(23.8787878, 90.87878),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
let marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: myLatlng,
map: map,
title:"Hello World!"
});
});
Template.html
<div class="contact-us" style="position: relative; height: 470px;"></div>
答案 1 :(得分:0)
标记功能似乎与官方文档here不匹配。
let map = new google.maps.Map(el, {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
let marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: myLatlng,
map: map,//set map created here
title:"Hello World!"
});