google-maps - 如何在 Google Maps Api 上使用 LatLngBounds

问题描述

我想根据我的标记将我的地图居中。我找到了“LatLngBounds”函数来做到这一点，但就我而言，它不起作用。

结果如下：

我们注意到变焦不够高。我应该得到一个放大了巴黎市的结果

这是我的 TS 代码：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { AngularFireAuth } from "angularfire2/auth";

import { GoogleMapsProvider } from './../../providers/google-maps/google-maps';

declare var google: any;

@IonicPage()
@Component({
    selector: 'page-favorite',
    templateUrl: 'favorite.html'
})
export class FavoritePage {
    @ViewChild('map') mapRef: ElementRef;
    map: any;
    lat: string;
    lng: string;
    view: string = "list";
    /**
     * a MODIFIER AVEC l'API
     */
    favorites: { id_place: string, name: string, photo: string, address: string }[] = [
        { "id_place": "9054b4cc53b207424db12d23e1b34b3ae0cfe9c0", "name": "Café Madeleine Paris", "photo": "https://lh3.googleusercontent.com/p/AF1QipMkeDY6tB5bQFEPhy1Ah4HR-2Oh7CjO_td-BbDY=s1600-w400", "address": "1 Rue Tronchet, Paris" },
        { "id_place": "cf49d5cbc84ecbe0388ef93eb80aa18f9db3ffa9", "name": "Cafe Kitsune", "photo": "https://lh3.googleusercontent.com/p/AF1QipNk8GqMTGNo-QF_QwdakFaNvoGwi11tHmY-969p=s1600-w400", "address": "1 Rue Tronchet, Paris" },
        { "id_place": "b8c6ecc9f9e047dd428f3994c537c3f877ba0e30", "name": "Café des Abattoirs", "photo": "https://lh3.googleusercontent.com/p/AF1QipPRKYf0L3uEYzPee5Y7uUBa15Q_7WWtUTWSHvqd=s1600-w400", "address": "10 Rue Gomboust, Paris" },
    ];


    positions = [
        ['Café paris', 48.86976989999999, 2.3253528, 1],
        ['Café paris2', 48.8708719, 2.3317623, 2],
        ['Café paris 3', 48.8710058, 2.3249572, 3]
    ];

    private bounds = new google.maps.LatLngBounds();

    constructor(
        private aFAuth: AngularFireAuth,
        public navCtrl: NavController,
        public GoogleMaps: GoogleMapsProvider,
    ) {

    }


    ionViewDidLoad() {
        this.initMap();
    }


    initMap() {

        this.map = new google.maps.Map(this.mapRef.nativeElement);

        this.setMarkers(this.map);
        this.map.fitBounds(this.bounds);


    }


    setMarkers(map) {
        for (var i = 0; i < this.positions.length; i++) {
            var position = this.positions[i];
            var marker = new google.maps.Marker({
                position: { lat: position[1], lng: position[2] },
                map: map,
                title: position[0],
                zIndex: position[3]
            });

            this.bounds.extend(marker.position);
        }

    }


    removeFavorite(id_place) {
        console.log('Remove favorite : ', id_place)
    }
}

你能帮帮我吗？谢谢！

标签： google-mapszoomingmarkers

只是为了一个建议，我使用以下代码进行了缩放，

      this.mapOptions = {
        center: this.latLng,
        zoom: 20, //here iam mentioned zoom level use like this
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

例子，

1：世界，

5：陆地/大陆，

10：城市

15：街道

20：建筑物，

google-maps - 如何在 Google Maps Api 上使用 LatLngBounds

问题描述

解决方案

推荐阅读