Карта AmCharts - вставить html

Я пытаюсь создать импульсный эффект для точки на карте AmCharts. Для этого мне нужно вставить HTML в точке широты и долготы, но я не могу понять, как это сделать через api (http://docs.amcharts.com/3/javascriptmaps/)

Вот эффект, которого я пытаюсь достичь - http://kevinurrutia.tumblr.com/post/16411271583/creating-a-css3-pulsating-circle

Вот jsfiddle карты с HTML и CSS http://jsfiddle.net/9cBXh/2/

// request #3275 
var dataPoints = [{
          latitude: '51.000000000000',
          longitude: '9.000000000000',
          type: 'bubble',
          color: '#cc0000',

          fixedSize: false,
          alpha: 0.9,
          height: 30,
          width: 30,
          centered: true,
          id: 'test'
  }];

AmCharts.ready(function() {
    // create AmMap object
    var map = new AmCharts.AmMap();
    // set path to images
    map.pathToImages = "http://www.ammap.com/lib/images/";

    var dataProvider = {
        mapVar: AmCharts.maps.worldLow,
        getAreasFromMap:false,
        images: dataPoints
    }; 

    // pass data provider to the map object
    map.dataProvider = dataProvider;

    map.areasSettings = {
        autoZoom: true,
        selectedColor: "#CC0000"
    };

    // write the map to container div
    map.write("mapdiv");               

});

Красная точка - это пузырь, созданный через API. Синяя точка и круг - это html, который мне нужно вставить в широту и долгую координату ... каким-то образом!

Любая помощь будет оценена.


map marker amcharts
person Xav    schedule 23.07.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вот полный рабочий пример карты AmCharts с несколькими пульсирующими элементами HTML в качестве маркеров карты:

http://www.amcharts.com/demos/custom-html-elements-map-markers/

(Вы можете просмотреть источник, нажав кнопку ИЗМЕНИТЬ)

Идея очень проста:

Ловушка для события "positionChanged". Просмотрите все «изображения» в dataProvider карты, создайте HTML-элементы для каждого из них, затем разместите их прямо над картой с помощью функций API, которые преобразуют координаты долготы / широты в координаты верхнего / левого угла экрана:

// add events to recalculate map position when the map is moved or zoomed
map.addListener("positionChanged", updateCustomMarkers);

// this function will take current images on the map and create HTML elements for them
function updateCustomMarkers (event) {
    // get map object
    var map = event.chart;

    // go through all of the images
    for( var x in map.dataProvider.images) {
        // get MapImage object
        var image = map.dataProvider.images[x];

        // check if it has corresponding HTML element
        if ('undefined' == typeof image.externalElement)
            image.externalElement = createCustomMarker(image);

        // reposition the element accoridng to coordinates
        image.externalElement.style.top = map.latitudeToY(image.latitude) + 'px';
        image.externalElement.style.left = map.longitudeToX(image.longitude) + 'px';
    }
}

// this function creates and returns a new marker element
function createCustomMarker(image) {
    // create holder
    var holder = document.createElement('div');
    holder.className = 'map-marker';
    holder.title = image.title;
    holder.style.position = 'absolute';

    // create dot
    var dot = document.createElement('div');
    dot.className = 'dot';
    holder.appendChild(dot);

    // create pulse
    var pulse = document.createElement('div');
    pulse.className = 'pulse';
    holder.appendChild(pulse);

    // append the marker to the map container
    image.chart.chartDiv.appendChild(holder);

    return holder;
}
person martynasma    schedule 24.07.2014
comment
Это круто. Спасибо - person Xav; 24.07.2014