在离子应用中实施openlayers-google地图

时间:2018-09-02 06:30:02

标签: google-maps ionic-framework openlayers

我正在尝试将openlayers-google-map实施到https://github.com/mapgears/ol3-google-maps拒绝的ionic3应用程序中。我试图复制链接中提供的示例代码,但未成功。我的html视图:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams, MenuController } from 'ionic-angular';
import * as $ from 'jquery';
import * as ol from 'openlayers';
import Map from 'ol/Map.js';
import GoogleLayer from 'olgm/layer/Google.js';
import {defaults} from 'olgm/interaction.js';
import OLGoogleMaps from 'olgm/OLGoogleMaps.js';

constructor(public googleLayer: GoogleLayer){ };
ngOnInit(){
   var map = new ol.Map({
            interactions: olgm.interaction.defaults(),
            controls: ol.control.defaults(),
            layers: [googleLayer],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            });

             var olGM = new olgm.OLGoogleMaps({
                map: map
              }); // map is the ol.Map instance
              olGM.activate();

}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css" type="text/css">
<script  type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?v=3&key=<my_Key>">
</script>
<script  type="text/javascript"
  src="http://dev5.mapgears.com/ol3-google-maps/dist/ol3gm.js">
</script>
<link rel="stylesheet" href="http://dev5.mapgears.com/ol3-google-maps/css/ol3gm.css" type="text/css" />
<ion-content>
  <div id="map" class="map"></div>
</ion-content>

有人可以帮助在ionic3应用程序中实现ol3-google map吗?

0 个答案:

没有答案