asp.net core 2.0 spa角谷歌地图

发布时间：2020-12-16 09:33:08 所属栏目：asp.Net 来源：网络整理

导读：我如何在asp.net核心spa角度应用程序中实现谷歌地图,我已经包含脚本到我的index.cshtml但从角度访问它时出错. import { Component } from '@angular/core';declare var google: any;@Component({ selector: 'home',templateUrl: './home.component.html'})ex

我如何在asp.net核心spa角度应用程序中实现谷歌地图,我已经包含脚本到我的index.cshtml但从角度访问它时出错.

import { Component } from '@angular/core';
declare var google: any;
@Component({
    selector: 'home',templateUrl: './home.component.html'
})
export class HomeComponent {
    constructor() {
        var mapProp = {
            center: new google.maps.LatLng(51.508742,-0.120850),zoom: 5,mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
    }
}

Index.html

@{
    ViewData["Title"] = "Home Page";
}

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR-KEY]" async defer></script>
<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
}

处理请求时发生未处理的异常.

NodeInvocationException: Uncaught (in promise): ReferenceError: google
is not defined ReferenceError: google is not defined at new
HomeComponent (F:yoClientAppdistmain-server.js:16281:25)

解决方法

.cshtml

<app asp-prerender-module="ClientApp/dist/main-server"
         asp-prerender-data='@ViewData["token"]' >Loading...</app>//Storing 

    <script src="~/dist/vendor.js" asp-append-version="true"></script>
    @section scripts {
        <script src="~/dist/main-client.js" asp-append-version="true"></script>
    }

boot.server.ts

setImmediate(() => {
                    resolve({
                        html: state.renderToString(),globals: {
                            tokenData: params.data
                        }

                    });

app.component.ts

declare var tokenData: any;
@Component({..})
export class AppComponent implements OnInit{
 ngOnInit() {
 let accessToken = tokenData;
 localStorage.setItem('token',accessToken);
     }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!