ruby-on-rails - 如何使用 ajax 用新的搜索结果更新 HERE maps api？

问题描述

我正在从 google maps API 迁移到 HERE maps api，并使用 ajax 更新停车位列表并将该列表绘制在 HERE 地图上。我正在使用 Ransack search rails gem 和 geocoder and rails 5。我在初始位置搜索中成功运行。但是，当用户更新搜索时，列表会成功生成，但地图并未使用新结果进行更新。预期结果用户在提交表单中输入新要求按下输入列表是使用 ajax 生成的，然后地图也使用 ajax 刷新新结果。

对于这个初始化语句，下面的部分是我用于谷歌地图的部分，当使用谷歌执行时成功

google.maps.event.addDomListener(window, 'load', function() {
initialize(<%= raw @arrParkings.to_json %>)
});

这就是我目前在第一个脚本中使用 HERE 地图的内容 initialize(<%= raw @arrParkings.to_json %>)

让 ajax 使用列表结果成功刷新地图的 HERE 地图的等效命令是什么？

我已经查看了这些文档，并且可能在正确的轨道上如何使用 ajax 实现它？ https://developer.here.com/documentation/maps/topics_api/h-mapevents-event.html

我在下面加载的 API 脚本

<link rel="stylesheet" type="text/css"
href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp- 
version=1533195059"/>
<script type="text/javascript" 
src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" 
 src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" 
src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" 
src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

我的 searchmap.html.erb 部分视图

    <script>


        var mapLocation = {lat: <%= @arrParkings[0].latitude %>, lng: <%= 
    @arrParkings[0].longitude %> };
        var zoomLvl = 15;

        var M = {
            'Init' : { // sign up http://developer.here.com for app_id and 
    app_code
            'app_id':   'app_id',
            'app_code': 'app-code',
            useHTTPS: true
        },
        'Behavior' :    {},         // Manage map behaviors
        'Container' :   {},         // Reference to DOM object containing map
        'Lat' :         mapLocation.lat,   // Latitude
        'Layers' :      {},         // Map layers
        'Lng' :         mapLocation.lng,       // Longitude
        'Map' :         {},         // Map object
        'Platform' :    {},         // Core to HERE API
        'UI' :          {},         // User interface and interaction
        'Zoom' :        zoomLvl           // 1 == global, 15 == street level
    };
    // Obtain reference to mapContainer in DOM
    M.Container = document.getElementById('mapContainer');
    // Store initialized platform object
    M.Platform = new H.service.Platform(M.Init);
    // Store reference to layers object
    M.Layers = M.Platform.createDefaultLayers(); //default setup!!
    // Create map object initialized with container and style
    // Set map style - example M.Layers.satellite.map
    M.Map = new H.Map(M.Container, M.Layers.normal.map);
    // Create behavior object initialized with map object
    M.Behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(M.Map));
    // Store UI object associated with map object and layers object
    M.UI = H.ui.UI.createDefault(M.Map, M.Layers);



        // Instantiate (and display) a map object:
        function displayMap() {
            M.Map.setCenter({lat:M.Lat, lng:M.Lng});
            M.Map.setZoom(M.Zoom);
        }

        function addMarkerToGroup(group, coordinate, html) {
        var marker = new H.map.Marker(coordinate);
        // add custom data to the marker
        marker.setData(html);
        group.addObject(marker);
    }

    function addInfoBubble(map, parkings) {
        var group = new H.map.Group();

        map.addObject(group);

        // add 'tap' event listener, that opens info bubble, to the group
        group.addEventListener('tap', function (evt) {
            // event target is the marker itself, group is a parent event target
            // for all objects that it contains
            var bubble =  new H.ui.InfoBubble(evt.target.getPosition(), {
                // read custom data
                content: evt.target.getData()
            });
            // show info bubble
            M.UI.addBubble(bubble);
        }, false);

        parkings.forEach(function(parking) {
            addMarkerToGroup(group, { lat: parking.latitude, lng: parking.longitude },
                "<div><a href='parkings/" + parking.id + "'><div class='map_price'>$" + parking.daily_price + "/Day</div>" + parking.listing_name+ "");
        });

    }


    // Create the default UI components

    // Default marker reference: https://developer.here.com/blog/how-to-migrate-from-google-map-markers-to-here-map-markers

    function displayDefaultMarker() {
        //marker for location
        let locationMarker = new H.map.Marker(mapLocation);
        M.Map.addObject(locationMarker);
    }

    function initialize(parkings) {
        parkings.forEach(function(parking) {
            // console.log("location: " + location);
            let marker = new H.map.Marker({lat: parking.latitude, lng: parking.longitude});
            M.Map.addObject(marker);
        });


        displayMap();
        displayDefaultMarker();
        addInfoBubble(M.Map, parkings);
    }



    initialize(<%= raw @arrParkings.to_json %>)


    // for the initaize statment above this portion below is what I used for google map that was sucesssful when I executed with google
    //
    //     google.maps.event.addDomListener(window, 'load', function() {
    //         initialize(<%= raw @arrParkings.to_json %>)
    //     });




</script>

我的停车清单部分

<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading preview">
            <%= image_tag parking.cover_photo(:medium) %>
        </div>
        <div class="panel-body">
            <%= link_to parking.listing_name, parking %><br/>
            $<%= parking.daily_price %> | <%= parking.attractions %> | <%= parking.accommodate %>
            <div id="star_<%= parking.id %>"></div> <%= pluralize(parking.average_rating, "review") %>
        </div>
    </div>
</div>

我的表单视图以提交增强搜索，该搜索通过 ajax 更新列表，但 HERE 地图未更新为相同的结果。使用 Ransack 宝石

    <div class="row">
        <div class="col-md-4">
            <label> Search for nearby buildings, services or attractions by 
    name</label>
            <%= f.search_field :attractions_cont_any, placeholder: "EG Arena's Name", class: "form-control" %>
    </div>
</div>

<div class="row text-center">
    <%= f.submit "Search", class: "btn btn-form" %>
</div>

我的 js 文件夹 search.js.erb 成功更新了列表结果，并且我在使用 Google 时使用了该文件夹

$('#parking_listing').html('<%= j render partial: 
"parkings/parkings_list", locals: {parkings: @arrParkings} %>')
initialize(<%= raw @arrParkings.to_json %>)

标签： ruby-on-railsajaxhere-api

ruby-on-rails - 如何使用 ajax 用新的搜索结果更新 HERE maps api？

问题描述

解决方案

推荐阅读