javascript - Google Maps: Multiple Custom HTML Markers - Stack Overflow

admin管理员组

文章数量:1307999

I have been working on this fiddle, and I'd like some advice.

As you can see, I can't get multiple markers to render in the correct place. No matter what I do, both markers render based on the location of the second marker in the htmlMarker[i] array.

Thanks for your help!

For reference, here is the JS:

var overlay;

function initialize() {
    var myLatLng = new google.maps.LatLng(62.323907, -150.109291);
    var mapOptions = {
        zoom: 11,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    function HTMLMarker(lat,lng){
        this.lat = lat;
        this.lng = lng;
        this.pos = new google.maps.LatLng(lat,lng);
    }

    HTMLMarker.prototype = new google.maps.OverlayView();
    HTMLMarker.prototype.onRemove= function(){}

    //init your html element here
    HTMLMarker.prototype.onAdd= function(){
        div = document.createElement('DIV');
        div.className = "htmlMarker";
        div.innerHTML = '<img src=".png">';
        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }

    HTMLMarker.prototype.draw = function(){
        var overlayProjection = this.getProjection();
        var position = overlayProjection.fromLatLngToDivPixel(this.pos);
        var panes = this.getPanes();
        panes.overlayImage.style.left = position.x + 'px';
        panes.overlayImage.style.top = position.y + 'px';
    }

    //to use it
    htmlMarker = [];
    htmlMarker[0] = new HTMLMarker(gmap.getCenter().k, gmap.getCenter().D);
    htmlMarker[1] = new HTMLMarker(gmap.getCenter().k+.05, gmap.getCenter().D+.05);
    htmlMarker[0].setMap(gmap);
    htmlMarker[1].setMap(gmap);
}

I have updated the fiddle (see update) to do some logging inside of HTMLMarker(); and at the end of the script. Here is the output:

HTMLMarker(lat,lng)= 62.323907, -150.10929099999998
HTMLMarker(lat,lng)= 62.373906999999996, -150.05929099999997
HTMLMarker.prototype.draw=500.5001116444473, 296.6240725676762
HTMLMarker.prototype.draw=573.3178894222365, 139.71828594914405

So it looks like the correct info is getting passed in, but somewhere things are being overridden.

UPDATE

I was able to isolate the marker HTML elements on the map. Looks like they are being nested within a single overlay:

<div style="transform: translateZ(0px); position: absolute; left: 573.317889422237px; top: 139.718285949144px; z-index: 104; width: 100%;">
  <div class="htmlMarker">
    <img src=".png">
  </div>
  <div class="htmlMarker">
    <img src=".png">
  </div>
</div>

I have been working on this fiddle, and I'd like some advice.

As you can see, I can't get multiple markers to render in the correct place. No matter what I do, both markers render based on the location of the second marker in the htmlMarker[i] array.

Thanks for your help!

For reference, here is the JS:

var overlay;

function initialize() {
    var myLatLng = new google.maps.LatLng(62.323907, -150.109291);
    var mapOptions = {
        zoom: 11,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    function HTMLMarker(lat,lng){
        this.lat = lat;
        this.lng = lng;
        this.pos = new google.maps.LatLng(lat,lng);
    }

    HTMLMarker.prototype = new google.maps.OverlayView();
    HTMLMarker.prototype.onRemove= function(){}

    //init your html element here
    HTMLMarker.prototype.onAdd= function(){
        div = document.createElement('DIV');
        div.className = "htmlMarker";
        div.innerHTML = '<img src="http://www.vcsd/img/icon/red.png">';
        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }

    HTMLMarker.prototype.draw = function(){
        var overlayProjection = this.getProjection();
        var position = overlayProjection.fromLatLngToDivPixel(this.pos);
        var panes = this.getPanes();
        panes.overlayImage.style.left = position.x + 'px';
        panes.overlayImage.style.top = position.y + 'px';
    }

    //to use it
    htmlMarker = [];
    htmlMarker[0] = new HTMLMarker(gmap.getCenter().k, gmap.getCenter().D);
    htmlMarker[1] = new HTMLMarker(gmap.getCenter().k+.05, gmap.getCenter().D+.05);
    htmlMarker[0].setMap(gmap);
    htmlMarker[1].setMap(gmap);
}

I have updated the fiddle (see update) to do some logging inside of HTMLMarker(); and at the end of the script. Here is the output:

HTMLMarker(lat,lng)= 62.323907, -150.10929099999998
HTMLMarker(lat,lng)= 62.373906999999996, -150.05929099999997
HTMLMarker.prototype.draw=500.5001116444473, 296.6240725676762
HTMLMarker.prototype.draw=573.3178894222365, 139.71828594914405

So it looks like the correct info is getting passed in, but somewhere things are being overridden.

UPDATE

I was able to isolate the marker HTML elements on the map. Looks like they are being nested within a single overlay:

<div style="transform: translateZ(0px); position: absolute; left: 573.317889422237px; top: 139.718285949144px; z-index: 104; width: 100%;">
  <div class="htmlMarker">
    <img src="http://www.vcsd/img/icon/red.png">
  </div>
  <div class="htmlMarker">
    <img src="http://www.vcsd/img/icon/red.png">
  </div>
</div>

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Mar 22, 2015 at 18:51 Abram asked Mar 22, 2015 at 16:27 AbramAbram 42k2828 gold badges138138 silver badges186186 bronze badges 2

• So from your question it would imply the two markers both render in exactly the same location? That's not what I see from your jsfiddle. You may want to attach a screenshot of what you expect to see; I'm probably misunderstanding the problem. One question; why all this OverlayView - couldn't you just use a normal marker? – duncan Commented Mar 22, 2015 at 18:27
• Duncan, see my update of the rendered HTML within the map. Also, I need the overlay view because I plan to dynamically render images inside a marker image holder. – Abram Commented Mar 22, 2015 at 18:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You must set the position of the images(or the div's that contain the images).

Currently you set the position of the overlayImage-pane(it's a single element, each instance of HTMLMarker will be appended to the same element/pane)

Fixed code:

//init your html element here
HTMLMarker.prototype.onAdd= function(){
    this.div = document.createElement('DIV');
    this.div.className = "htmlMarker";
    this.div.style.position='absolute';
    this.div.innerHTML = '<img src="http://www.vcsd/img/icon/red.png">';
    var panes = this.getPanes();
    panes.overlayImage.appendChild(this.div);
}

HTMLMarker.prototype.draw = function(){
    var overlayProjection = this.getProjection();
    var position = overlayProjection.fromLatLngToDivPixel(this.pos);
    var panes = this.getPanes();
    this.div.style.left = position.x + 'px';
    this.div.style.top = position.y + 'px';
}

http://jsfiddle/q2cnne7y/17/

本文标签： javascriptGoogle Maps Multiple Custom HTML MarkersStack Overflow