如何使用Ajax使用新的搜索结果更新HERE Maps api？

Question

我正在从Google Maps API迁移到HERE Maps api，并使用Ajax更新停车位列表，并在HERE地图上绘制该列表。 我正在使用Ransack搜索导轨gem和geocoder和rails5。在初始位置搜索中，它已成功运行。 但是，当用户更新搜索时，将成功生成列表，但是不会使用新结果更新地图。 预期结果用户在提交表单中输入新要求，然后按一下，使用ajax生成列表，然后使用新结果用ajax刷新地图。

对于此Initialize语句，以下部分是我用于google map的内容，当与google执行时成功

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

这是我目前在第一个脚本中使用HERE映射初始化的内容（<％= raw @ arrParkings.to_json％>）

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

我已经审查了这些文档，并且可能在正确的路线上如何使用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 %>)

Answer 1

最后，您需要触发对新停车位的新请求，然后刷新其地图显示。 也许这个扩展的示例有所帮助：

https://tcs.ext.here.com/examples/v3/geocoder_autocomplete