Я перехожу с API карт Google на HERE maps api и использую ajax для обновления списка парковочных мест, и этот список отображается на карте HERE.Я использую драгоценный камень и геокодер и рельсы поиска Ransack 5. Он успешно работает при начальном поиске местоположения.однако, когда пользователь обновляет поиск, список генерируется успешно, однако карта не обновляется с новыми результатами.Ожидаемые результаты. Пользователь вводит новое требование в форму отправки. Ввод списка производится с использованием ajax, а затем карта также обновляется с помощью ajax с новыми результатами.
для этого оператора инициализации, часть ниже - это то, что яиспользуется для карты Google, которая была успешной при выполнении с Google
google.maps.event.addDomListener(window, 'load', function() {
initialize(<%= raw @arrParkings.to_json %>)
});
Это то, что у меня сейчас с картой HERE в первой инициализации скрипта (<% = raw @ arrParkings.to_json%>)
Какова будет эквивалентная команда для карт HERE, чтобы 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>
My 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, но карта ЗДЕСЬ не обновляется с теми же результатами.Использование Ransack gem
<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 %>)