角度2谷歌地图不会出现

时间:2017-05-02 00:57:56

标签: angular angular-google-maps

现在我尝试在角度2中使用谷歌地图,但我什么都没有,但没有错误,但地图不会出现,所以任何人都可以告诉我,我做错了什么?

感谢您的帮助

的index.html

   <!DOCTYPE html>
    <html>
       <head>
         <title>ng Events</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="node_modules/ng2f-bootstrap/dist/bootstrap.min.css">
        <link rel="stylesheet" href="styles.css">

        <!-- Polyfill(s) for older browsers -->
        <script src="node_modules/core-js/client/shim.min.js"></script>


       <script src="node_modules/jquery/dist/jquery.min.js"></script>
       <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
       <script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script>

<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>
    System.import('app').catch(function(err){console.error(err);});
</script>
    </head>

    <body class="container">
      <app-root></app-root>
    </body>
  </html>

main.ts

   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

   import {AppModule} from './app.module'

   platformBrowserDynamic().bootstrapModule(AppModule)

app.module.ts

    import { NgModule, ApplicationRef, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'
    import { BrowserModule } from '@angular/platform-browser'
    //import { EventAppComponent } from './events-app.component'

    import { AgmCoreModule} from '@agm/core'
    import { AppComponent } from './app.component'



   @NgModule({
imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyADbB0V0Esy-BQ-Oxk9vkr_ifJqcxK3LEo'
    })
  ],
schemas:  [ CUSTOM_ELEMENTS_SCHEMA ],
providers: [],
declarations: [AppComponent],
bootstrap: [AppComponent]
     })
     export class AppModule
     {

     }

app.component.ts

      import { Component } from '@angular/core';

      @Component({
        selector: 'app-root',
        styles: [`
          .sebm-google-map-container {
            height: 300px;
          }
`      ],
      template: `
           <sebm-google-map [latitude]="lat" [longitude]="lng"></sebm-google-map>
`
     })
    export class AppComponent {

       // initial center position for the map
       lat: number = 51.678418
       lng: number = 7.809007
    }

1 个答案:

答案 0 :(得分:0)

根据document说明,您需要添加SebmGoogleMap指令和模块才能在ng2.Below中使用,并相应地进行更改。

class ViewController: UIViewController, MFMailComposeViewControllerDelegate {

override func viewDidLoad() {
    super.viewDidLoad()
}

@IBAction func sendEmailButtonTapped(sender: AnyObject) {
    let mailComposeViewController = configuredMailComposeViewController()
    if MFMailComposeViewController.canSendMail() {
        self.present(mailComposeViewController, animated: true, completion: nil)
    } else {
        self.showSendMailErrorAlert()
    }
}

func configuredMailComposeViewController() -> MFMailComposeViewController {
    let mailComposerVC = MFMailComposeViewController()
    mailComposerVC.mailComposeDelegate = self // Extremely important to set the --mailComposeDelegate-- property, NOT the --delegate-- property
    mailComposerVC.delegate = self
    mailComposerVC.setToRecipients(["someone@somewhere.com"])
    mailComposerVC.setSubject("Sending you an in-app e-mail...")
    mailComposerVC.setMessageBody("Sending e-mail in-app is not so bad!", isHTML: false)

    return mailComposerVC
}

func showSendMailErrorAlert() {
    let sendMailErrorAlert = UIAlertView(title: "Could Not Send Email", message: "Your device could not send e-mail.  Please check e-mail configuration and try again.", delegate: self, cancelButtonTitle: "OK")
    sendMailErrorAlert.show()
}

// MARK: MFMailComposeViewControllerDelegate Method
func mailComposeController(_ controller: MFMailComposeViewController, didFinishWith result: MFMailComposeResult, error: Error?) {
    controller.dismiss(animated: true, completion: nil)
}
}