草庐IT

javascript - Angular-Google-Map : How to Load Map after Position Data Loaded(Lat, Lng)？

coder 2024-07-23 原文

我得到了错误: 'angular-google-maps:找不到有效的中心属性'。 当我 $watch 从 php 后端加载我的 locationData 并执行初始化函数时。

HTML:

<div ng-init="locationData = '<?=htmlspecialchars($data)?>'">
    <google-map center="map.center" zoom="map.zoom" options="map.options"></google-map>
</div>

Angular Controller :

app.controller('MapCtrl', ['$scope', function ($scope) {
    'use strict';

    $scope.$watch('locationData', function() {
        var location = JSON.parse($scope.locationData);
        $scope.location = {
            lng : location.longitude,
            lat : location.latitude
        initialize();
    });

    function initialize() {
        var mapOptions = {
            panControl    : true,
            zoomControl   : true,
            scaleControl  : true,
            mapTypeControl: true,
            mapTypeId     : google.maps.MapTypeId.ROADMAP
        };

        $scope.map = {
            center: {
                latitude: $scope.location.lat,
                longitude: $scope.location.lng
            },
            zoom: 13,
            options: mapOptions,
        };
    }
}]);

然后，我将 $scope.map 设置移动到 Controller block 的顶部，并将常量值设置为 map

center: {
    latitude: 0,
    longitude: 0
},

， map 显示正确。

Angular Controller :

app.controller('MapCtrl', ['$scope', function ($scope) {
    'use strict';

    var mapOptions = {
        panControl    : true,
        zoomControl   : true,
        scaleControl  : true,
        mapTypeControl: true,
        mapTypeId     : google.maps.MapTypeId.ROADMAP
    };

    $scope.map = {
        center: {
            latitude: 0,
            longitude: 0
        },
        zoom: 13,
        options: mapOptions,
    };
}]);

google map 指令如何在加载数据后解析并使用后端 Lat、Lng 数据正确显示 map ？

最佳答案

最后，我使用 ng-if，并在之后将 map.isReady 值从 false 更改为 true map 初始化。

<div ng-init="locationData = '<?=htmlspecialchars($data)?>'">
    <div ng-if="map.isReady">
        <google-map center="map.center" zoom="map.zoom" options="map.options"></google-map>
    </div>
</div>

有效。

关于javascript - Angular-Google-Map : How to Load Map after Position Data Loaded(Lat, Lng)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21641420/

Angular-Google-Mapjavascriptcodemapscopeangularjsgoogle-mapsgoogle-maps-api-3angular-google-maps

有关javascript - Angular-Google-Map : How to Load Map after Position Data Loaded(Lat, Lng)？的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. ruby - 在 ruby​​ 中使用 .try 函数和 .map 函数 - 2

    我需要从json记录中获取一些值并像下面这样提取curr_json_doc['title']['genre'].map{|s|s['name']}.join(',')但对于某些记录，curr_json_doc['title']['genre']可以为空。所以我想对map和join()使用try函数。我试过如下curr_json_doc['title']['genre'].try(:map,{|s|s['name']}).try(:join,(','))但是没用。 最佳答案 你没有正确传递block。block被传递给参数括号外的方法

  3. ruby - Google-api-ruby-client 翻译 API 示例 - 2

    很高兴看到google代码:google-api-ruby-client项目，因为这对我来说意味着Ruby人员可以使用GoogleAPI-s来完善代码。虽然我现在很困惑，因为给出的唯一示例使用Buzz，并且根据我的实验，Google翻译(v2)api的行为必须与google-api-ruby-client中的Buzz完全不同。.我对“Explorer”演示示例很感兴趣——但据我所知，它并不是一个探索器。它所做的只是调用一个Buzz服务，然后浏览它已经知道的关于Buzz服务的事情。对我来说，Explorer应该让您“发现”所公开的服务和方法/功能，而不一定已经知道它们。我很想听听使用这个

  4. ruby - 不能将 `each` 的所有或大多数情况替换为 `map` 吗？ - 2

    Enumerable#each和Enumerable#map的区别在于返回的是接收者还是映射后的结果。回到接收者是微不足道的，你通常不需要在each之后继续一个方法链，比如each{...}.another_method(我可能没见过这样的案例。即使你想回到接收者那里，你也可以通过tap来实现)。所以我认为所有或者大部分使用Enumerable#each的情况都可以用Enumerable#map代替。我错了吗？如果我是对的，each的目的是什么？map是否比each慢？编辑:我知道当您对返回值不感兴趣时​​使用each是一种常见的做法。我对这种做法是否存在不感兴趣，但感兴趣的是，除了从

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. ruby - `map` 比 `each` 快吗？ - 2

    map遍历数组是否比each更快？两者有速度差异吗？mapresult=arr.map{|a|a+2}每个result=[]arr.eachdo|a|result.push(a+2)end 最佳答案 我认为是的。我试过这个测试require"benchmark"n=10000arr=Array.new(10000,1)Benchmark.bmdo|x|#Mapx.reportdon.timesdoresult=arr.map{|a|a+2}endend#Eachx.reportdon.timesdoresult=[]arr.each

  7. ruby - 如何从 URL 中删除 Google 跟踪参数 (UTM)？ - 2

    我有一堆要清理的URL。它们都包含UTM参数，在这种情况下不是必需的，或者是有害的。示例:http://houseofbuttons.tumblr.com/post/22326009438?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+HouseOfButtons+%28House+of+Buttons%29所有可能的参数都以utm_开头。如何使用ruby​​脚本/结构轻松删除它们而不破坏其他潜在的“好”URL参数？ 最佳答案 您可以将正则表达式应用于url以清

  8. ruby - 用于 Ruby 哈希的 map_values()？ - 2

    我想念Ruby中的Hash方法来仅转换/映射散列值。h={1=>[9,2,3,4],2=>[6],3=>[5,7,1]}h.map_values{|v|v.size}#=>{1=>4,2=>1,3=>3}你如何在Ruby中归档它？更新:我正在寻找map_values()的实现。#moreexamplesh.map_values{|v|v.reduce(0,:+)}#=>{1=>18,2=>6,3=>13}h.map_values(&:min)#=>{1=>2,2=>6,3=>1} 最佳答案 Ruby2.4引入了方法Hash#tran

  9. ruby - 了解 Ruby Enumerable#map(具有更复杂的 block ) - 2

    假设我有一个函数defodd_or_evennifn%2==0return:evenelsereturn:oddendend我有一个简单的可枚举数组simple=[1,2,3,4,5]然后我用我的函数在map中运行它，使用一个do-endblock:simple.mapdo|n|odd_or_even(n)end#=>[:odd,:even,:odd,:even,:odd]如果不首先定义函数，我怎么能做到这一点？例如，#doesnotworksimple.mapdo|n|ifn%2==0return:evenelsereturn:oddendend#Desiredresult:#=>[

  10. ruby - 将 each_with_index 与 map 一起使用 - 2

    我想获取一个数组并将其作为订单列表。目前我正在尝试以这种方式进行:r=["a","b","c"]r.each_with_index{|w,index|puts"#{index+1}.#{w}"}.map.to_a#1.a#2.b#3.c#=>["a","b","c"]输出应该是["1.a","2.b","3.c"]。如何让正确的输出成为r数组的新值？ 最佳答案 a.to_enum.with_index(1).map{|element,index|"#{index}.#{element}"}或a.map.with_index(1){|

随机推荐