mapstraction.removeMarker didn't remove the marker on map
It doesn't throws any exception.bt its not removed on mapstraction map.
`mapstraction.removeMarker(markers[j]);
//I will get all markers from mapstraction map, then i want to remove all
removeAllMarkers(mapstraction.markers);
//some of them are not removed
function removeAllMarkers(markers){
for(var j=0; j<markers.length; j++){
try{
mapstraction.removeMarker(markers[j]);
}catch(err){
}
}
}
Related
I have an object as follows which comes through #Input.
#Input() data;
//**
{
"class_a":["John","Harr y"],
"class_b":["Joseph","Phlip","David"],
"class_c":[]
}
**//
I need to detect the changes if data added or removed in class_a or class_b but im only getting change detection if values of objects are string.
Since the keys in my object are dynamic i couldn't iterate the object and create Iterable differs.
Is there anyway to detect changes of array inside the object.
My Implementation:
constructor(private differs: KeyValueDiffers) {
this.keyValueDiffer = differs.find({}).create();
}
ngDoCheck() {
let changes = this.keyValueDiffer.diff(this.data[this.component.factedBindKey]);
if (changes) {
console.log('Changes detected');
}
}
you can test like this
constructor(private cd: ChangeDetectorRef) {
}
ngOnChanges() {
let actualData =this.data
this.mymethod(actualData);
}
and call this line where you want to access that actual data like this
mymethod(data){
this.cd.detach();
//write main logic
}
I am using the Microsoft Word Javascript API. I have used the .search() function to retrieve an array of ranges and then have saved them to state.definitions in my App.js React component state. This part works. When I try to print out the state using console.log(JSON.stringify(this.state.definitions)), I see the ranges that I just saved.
In a separate function, I want to retrieve those ranges and highlight them in a new color. This part does not work. I don't get any errors, but I don't see any highlight changes in the document.
Interestingly, if I try to highlight the ranges BEFORE saving them to state, it works. This makes me think that the ranges that I am retrieving from state are not actually the ranges understood by Word.
Any help would be much appreciated.
var flattenedTerms contains an array of range items that were retrieved from Word a few lines above. This code successfully changes the font
for (var i = 0; i < flattenedTerms.length; i++) {
console.log('flattenedTerms: ', flattenedTerms[i]);
flattenedTerms[i].font.color = 'purple';
flattenedTerms[i].font.highlightColor = 'pink';
flattenedTerms[i].font.bold = true;
}
return context.sync().then(function () {
return resolve(flattenedTerms);
})
})
Now the flattenedTerms array, which contains the range items, has been saved to state.definitions using this.setState. This fails to change the font. All of the console.logs do print.
highlightDefinedTerms = () => {
var self = this;
return Word.run(
function (context) {
var definitions = self.state.definitions;
console.log('Highlighting ', definitions.length, ' terms.');
for (var i = 0; i < definitions.length; i++) {
console.log('Highlighting definition: ', JSON.stringify(definitions[i]));
definitions[i].font.color = 'blue';
definitions[i].font.highlightColor = 'red';
definitions[i].font.bold = true;
}
return context.sync();
}
)
}
You need to pass a first parameter to “Word.run” to specify the object whose context you want to resume.
Word.run(self.state.definitions, function(context) ...)
I have an array of 40 different image URLs being returned from an AJAX request. I'm trying to create a new HTML image element for each URL in the array using a For loop, as seen in the below code. For some reason, it's only displaying the image at the first URL and that's it. Any idea why the other 39 aren't showing up?
$(document).ready(function() {
$.ajax({
type: 'GET',
dataType: 'json',
url: 'https://****/images',
success: function(data) {
console.log(data);
let container = document.getElementById('feed');
let image = document.createElement("img");
for (let i = 0; i < data.length; i++) {
image.setAttribute('src', data[i]);
container.appendChild(image);
}
}
});
});
<body>
<div id="feed">
</div>
</body>
Try to create the element inside the loop.
for (let i = 0; i < data.length; i++) {
let image = document.createElement("img");
image.setAttribute('src', data[i]);
container.appendChild(image);
}
The way to create images is with new Image() and when appending multiple nodes to the DOM at once, it's better to first append the image nodes into a document fragment, and only when all the images have been appended to the fragment, then append the fragment itself into the Document (prevents redundant repaints)
// dummy data
const data = ['http://placekitten.com/100/100',
'http://placekitten.com/100/150',
'http://placekitten.com/100/180',
'http://placekitten.com/100/200']
// create a dumpster-node for the images to reside in
const fragment = document.createDocumentFragment();
// iterate the data and create <img> elements
data.forEach(url => {
let image = new Image()
image.src = url;
fragment.appendChild(image);
})
// dump the fragment into the DOM all the once (FTW)
document.body.appendChild(fragment);
I've used Array forEach iterator in my example, because it's easier in my opinion, but you can use a for loop (or for..of loop)
I'm not getting it: I have an array to manage my markers I add to a map. When I update the collection, the markers duplicate even though my markers array still only has the correct number of them in it.
I'm sure this is a really simple and stupid mistake on my part - but I'm not seeing it.
m.viewMarkers = function(data){
//ajax call to get latLng, returns an object with 4 markers
showMarkers();
}
function showMarkers(){
g.currentMarkers = []; // setting up my marker array
$.each(g.markersCollection, function(i,item){ // jquery-iterate over the object from the ajax call
g.currentMarkers.push( // adding markers to the array but purposely not drawing them on the map just yet
new google.maps.Marker({
position : new google.maps.LatLng(item.lat, item.lng)
});
);
});
$.each(g.currentMarkers, function(i,item){
if( g.map.getBounds().contains( item.getPosition() ) ){ // checking if this marker is within the viewport
item.setMap(g.map);
}
else {
item.setMap(null); // i don't want to have invisible markers slowing down my map
}
});
console.log(g.currentMarkers.length); // tells me it's 4, just as expected
}
google.maps.event.addListener(g.map, 'dragend', function() {
m.viewMarkers();
});
To me this looks like all is well, but the map keeps drawing 4 new markers on every dragend.... eeek!
Modify your showMarkers() function to this:
function showMarkers(){
//Removing old markers from the Map,if they are exist
if(g.currentMarkers && g.currentMarkers.length !== 0){
$.each(g.currentMarkers, function(i,item){
item.setMap(null);
});
}
g.currentMarkers = []; // setting up my marker array
$.each(g.markersCollection, function(i,item){
var expectedPosition = new google.maps.LatLng(item.lat, item.lng);
//No need to add marker on the Map if it will not visible on viewport,
//so we check the position, before adding
if(g.map.getBounds().contains(expectedPosition)){
g.currentMarkers.push(new google.maps.Marker({
position : expectedPosition
}) );
}
});
}
You can also compare new markers with your stored markers using some of following code (to display stored markers rather than new response marker):
var latlng1,latlng2;
for (var i=0; i< storedmarker.length; i++){
//Removing old markers from the Map,if they are exist with storedmarkers
latlng1 = storedmarker[i].getPosition();
for (var j=0; j< newmarkers.length; j++) {
latlng2 = newmarkers[j].getPosition();
if(latlng1.equals(latlng2)){
newmarkers[j].setMap(null);
}
}
//Set Marker
storedmarker[i].setMap(map);
}
Looking through the Google Maps Javascript v3 API it looks like if I want to group together markers and add or remove them as groups, I need to roll my own code based on the sample below.
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
// Shows any overlays currently in the array
function showOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
Is there a more elegant solution to grouping markers and infowindows besides arrays?
Depending on what it is you want to do, MarkerClusterer might be helpful: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html