如何使用DOM元素的数据属性使用HTML标记（Overlay）填充Google Map [英] How to Populate a Google Map with HTML markers (Overlay) using data attributes from DOM elements

查看：150
本文介绍了如何使用DOM元素的数据属性使用HTML标记（Overlay）填充Google Map的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用谷歌地图，其中：


  1. 我想要运行类似于重新加载标记此处的操作： http://jsfiddle.net/upsidown/p646xmcr/ （注意：这个具体部分与这个问题并不完全相关，我只想提供一些上下文，因为代码使用了上述链接中的一些元素）


  2. 我想从某些DOM元素的数据属性填充我的地图


  3. 而不是使用默认地图标记，我想使用像这样的HTML标记： Google Maps：多个自定义HTML标记


我有什么：


  1. 一个小提琴： https://jsfiddle.net/yh2ucyq7/

  2. 标记是loadi有点正确，拉/ lng工作

我无法弄清楚


  1. 我如何获得每个HTML标记的内部HTML来正确填充，目前它只显示用于填充地图的最后一个DOM元素的文本

我的JavaScript：

  //从结果DOM绘制点元素
函数makeMapPlotPoints（）{
 
 //从结果列表中设置标记并创建空的绘图点数组
 var mapPlotPointDOM = $（。listing-item）; 
 var mapPlotPointArr = []; 
 
 $（mapPlotPointDOM）.each（function（）{
 if（$（this）.data（marker-lat）！=='）{
 mapPlotPointArr .push（[
 $（this）.data（marker-id），
 $（this）.data（marker-lat），
 $（this）.data （marker-lng），
]）; 
} 
}）; 
 setMarkers（mapPlotPointArr）; 
}; 
 
 var map; 
 var markers = []; //创建一个标记数组来保存标记
 
 //创建空LatLngBounds对象
 var bounds = new google.maps.LatLngBounds（）; 
 var infowindow = new google.maps.InfoWindow（）; 
 var center = {
 lat：0，
 lng：0 
}; 
 
 var overlay; 
 
函数setMarkers（locations）{
 
 for（var i = 0; i< locations.length; i ++）{
 
 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（）{} 
 
 var mapMarkerItem = locations [i]; 
 var myLatLng = new google.maps.LatLng（mapMarkerItem [1]，mapMarkerItem [2]）; 
 
 // init你的html元素
 HTMLMarker.prototype.onAdd = function（）{
 div = document.createElement（'DIV'）; 
 div.style.position ='absolute'; 
 div.className =htmlMarker; 
 div.innerHTML = mapMarkerItem [0]; // ###注意：这是为所有html标记返回相同的值
 var panes = this.getPanes（）; 
 panes.overlayImage.appendChild（div）; 
 this.div = 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  -  10 +'px'; 
} 
 
 //使用它
 var htmlMarker = new HTMLMarker（mapMarkerItem [1]，mapMarkerItem [2]）; 
 htmlMarker.setMap（map）; 
 
 
 //将地图边界设置为Auto-center 
 bounds.extend（myLatLng）; 
 map.fitBounds（bounds）; 
 
 //将标记推到标记数组
 markers.push（htmlMarker）; 
 
 //标记信息窗口/工具提示（不工作）
 google.maps.event.addListener（htmlMarker，'click'，（function（htmlMarker，i）{
 return function（）{
 infowindow.setContent（locations [i] [4]）; 
 infowindow.open（map，htmlMarker）; 
} 
}）（htmlMarker，i） ）; 
 
} 
} 
 
 
 
函数reloadMarkers（）{
 
 //循环标记和设置（var i = 0; i< markers.length; i ++）{
 
 markers [i] .setMap（null）;为每个
映射为null 
} 
 
 //重置标记数组
 markers = []; 
 
 //调用set标记来重新添加标记
 makeMapPlotPoints（）; 
} 
 
函数initializeMap（）{
 
 var mapOptions = {
 zoom：2，
 center：new google.maps.LatLng （0，-30），
 mapTypeId：google.maps.MapTypeId.ROADMAP，
} 
 
 map = new google.maps.Map（document.getElementById（'map-画布'），mapOptions）; 
 
 makeMapPlotPoints（）; 
 
} 
 
 initializeMap（）;


解决方案

mapMarkerItem [0] / code>始终是一样的（如你所发现的）。 

  div.innerHTML = mapMarkerItem [0];

您需要将唯一的值传递给HtmlMarker的构造函数。

 函数HTMLMarker（lat，lng，text）{
 this.lat = lat; 
 this.lng = lng; 
 this.pos = new google.maps.LatLng（lat，lng）; 
 this.text = text; 
} 
 HTMLMarker.prototype.onAdd = function（）{
 var div = document.createElement（'DIV'）; 
 div.style.position ='absolute'; 
 div.className =htmlMarker; 
 div.innerHTML = this.text; 
 var panes = this.getPanes（）; 
 panes.overlayImage.appendChild（div）; 
 this.div = div; 
}

概念证明小提琴



代码段： 



 函数HTMLMarker（lat，lng，text）{this.lat = lat; this.lng = lng; this.pos = new google.maps.LatLng（lat，lng）; this.text = text;} HTMLMarker.prototype = new google.maps.OverlayView（）; HTMLMarker.prototype.onRemove = function（）{} // init你的HTML元素在这里HTMLMarker.prototype.onAdd = function（）{var div =使用document.createElement（ 'DIV'）; div.style.position ='absolute'; div.className =htmlMarker; div.innerHTML = this.text; var panes = this.getPanes（）; panes.overlayImage.appendChild（DIV）; this.div = 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  -  10 +'px';} //从结果中绘制点DOM元素功能makeMapPlotPoints（）{//从结果列表中设置标记并创建空的绘图点数组var mapPlotPointDOM = $（ .listing项）; var mapPlotPointArr = []; $（mapPlotPointDOM）.each（function（）{if（$（this）.data（marker-lat）！=='）{mapPlotPointArr.push（[$（this）.data（marker-id ），$（this）.data（marker-lat），$（this）.data（marker-lng），]）;}}）; setMarkers（mapPlotPointArr）;}; var map; var markers = []; //创建一个标记数组来保存标记//创建空LatLngBounds objectvar bounds = new google.maps.LatLngBounds（）; var infowindow = new google.maps.InfoWindow（）; var center = {lat：0，lng：0} ; var overlay; function setMarkers（locations）{for（var i = 0; i< locations.length; i ++）{var mapMarkerItem = locations [i]; var myLatLng = new google.maps.LatLng（mapMarkerItem [1]，mapMarkerItem [2]）; //使用它var htmlMarker = new HTMLMarker（mapMarkerItem [1]，mapMarkerItem [2]，mapMarkerItem [0]）; htmlMarker.setMap（地图）; //将地图界限设置为Auto-center bounds.extend（myLatLng）; map.fitBounds（边界）; //将标记推到标记数组//markers.push(marker）; markers.push（htmlMarker）; }} function initializeMap（）{var mapOptions = {zoom：2，maxZoom：18，minZoom：2，center：new google.maps.LatLng（0，-30），mapTypeId：google.maps.MapTypeId.ROADMAP，} map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; makeMapPlotPoints（）;} initializeMap（）;  

  #listings， .results-map-wrapper {width：50％; float：left;}＃map-canvas {width：100％; height：400px;}。htmlMarker {background：＃f00000;颜色：#ffffff; height：20px; width：20px;}  

 < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =https://maps.googleapis.com/maps/ api / js>< / script>< div id =listing> < div class =listing-itemdata-marker-id =01data-marker-lng =0data-marker-lat =0标记01< / div> < div class =listing-itemdata-marker-id =02data-marker-lng =0data-marker-lat =-2标记02< / div> < div class =listing-itemdata-marker-id =03data-marker-lng =0data-marker-lat =-4标记03< / div> < div class =listing-itemdata-marker-id =04data-marker-lng =0data-marker-lat =2>标记04< / div> < div class =listing-itemdata-marker-id =05data-marker-lng =0data-marker-lat =4 Marker 05< / div>< / div>< div class =results-map-wrapper> < div id =map-canvas>< / div>< / div>


I'm working on a google map where:

  1. I want to run something similar to the 'reload markers' action here: http://jsfiddle.net/upsidown/p646xmcr/ (NOTE: this specific part isn't entirely pertinent to this question, I just want to provide some context as the code does use some elements from the aforementioned link)

  2. I want to populate my map from data attributes of some DOM elements

  3. Instead of using the default map markers, I want to use HTML markers like here: Google Maps: Multiple Custom HTML Markers

What I have:

  1. A fiddle: https://jsfiddle.net/yh2ucyq7/
  2. the markers are loading somewhat correctly, the lat/lng works

What I can't figure out

  1. How I can get the inner HTML of each HTML Marker to populate correctly, currently it's only showing the text for the last DOM element used to populate the map

My JavaScript:

    // Make Plot Points From Results DOM Elements
function makeMapPlotPoints() {

    // Set marker from results list and create empty plot point array
    var mapPlotPointDOM = $(".listing-item");
    var mapPlotPointArr = [];

    $(mapPlotPointDOM).each(function() {
        if($(this).data("marker-lat") !== ''){
            mapPlotPointArr.push([
                $(this).data("marker-id"),
                $(this).data("marker-lat"),
                $(this).data("marker-lng"),
            ]);
        }
    });
    setMarkers(mapPlotPointArr);
};

var map;
var markers = []; // Create a marker array to hold markers

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var center = {
    lat: 0,
    lng: 0
};

var overlay;

function setMarkers(locations) {

    for (var i = 0; i < locations.length; i++) {

        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 () {}

        var mapMarkerItem = locations[i];
        var myLatLng = new google.maps.LatLng(mapMarkerItem[1], mapMarkerItem[2]);

        //init your html element here
        HTMLMarker.prototype.onAdd = function () {
            div = document.createElement('DIV');
            div.style.position='absolute';
            div.className = "htmlMarker";
            div.innerHTML = mapMarkerItem[0]; // ### NOTE: This is returning the same value for all html markers
            var panes = this.getPanes();
            panes.overlayImage.appendChild(div);
            this.div=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 - 10 + 'px';
        }

        //to use it
        var htmlMarker = new HTMLMarker(mapMarkerItem[1], mapMarkerItem[2]);
        htmlMarker.setMap(map);


        // Set Map Bounds to Auto-center
        bounds.extend(myLatLng);
        map.fitBounds(bounds);

        // Push marker to markers array
        markers.push(htmlMarker);

        // Marker Info Window / Tooltip (not working)
        google.maps.event.addListener(htmlMarker, 'click', (function(htmlMarker, i) {
            return function() {
                infowindow.setContent(locations[i][4]);
                infowindow.open(map, htmlMarker);
            }
        })(htmlMarker, i));

    }
}



function reloadMarkers() {

    // Loop through markers and set map to null for each
    for (var i = 0; i < markers.length; i++) {

        markers[i].setMap(null);
    }

    // Reset the markers array
    markers = [];

    // Call set markers to re-add markers
    makeMapPlotPoints();
}

function initializeMap() {

    var mapOptions = {
        zoom: 2,
        center: new google.maps.LatLng(0, -30),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    makeMapPlotPoints();

}

initializeMap();

解决方案

mapMarkerItem[0] is always the same (as you discovered). 

div.innerHTML = mapMarkerItem[0];

You need to pass the unique value into the constructor for the HtmlMarker.

function HTMLMarker(lat, lng, text) {
  this.lat = lat;
  this.lng = lng;
  this.pos = new google.maps.LatLng(lat, lng);
  this.text = text;
}
HTMLMarker.prototype.onAdd = function() {
  var div = document.createElement('DIV');
  div.style.position = 'absolute';
  div.className = "htmlMarker";
  div.innerHTML = this.text;
  var panes = this.getPanes();
  panes.overlayImage.appendChild(div);
  this.div = div;
}

proof of concept fiddle

code snippet:

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

//init your html element here
HTMLMarker.prototype.onAdd = function() {
  var div = document.createElement('DIV');
  div.style.position = 'absolute';
  div.className = "htmlMarker";
  div.innerHTML = this.text;
  var panes = this.getPanes();
  panes.overlayImage.appendChild(div);
  this.div = 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 - 10 + 'px';
}

// Make Plot Points From Results DOM Elements
function makeMapPlotPoints() {

  // Set marker from results list and create empty plot point array
  var mapPlotPointDOM = $(".listing-item");
  var mapPlotPointArr = [];

  $(mapPlotPointDOM).each(function() {
    if ($(this).data("marker-lat") !== '') {
      mapPlotPointArr.push([
        $(this).data("marker-id"),
        $(this).data("marker-lat"),
        $(this).data("marker-lng"),
      ]);
    }
  });
  setMarkers(mapPlotPointArr);
};

var map;
var markers = []; // Create a marker array to hold markers

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var center = {
  lat: 0,
  lng: 0
};

var overlay;

function setMarkers(locations) {

  for (var i = 0; i < locations.length; i++) {

    var mapMarkerItem = locations[i];
    var myLatLng = new google.maps.LatLng(mapMarkerItem[1], mapMarkerItem[2]);

    //to use it
    var htmlMarker = new HTMLMarker(mapMarkerItem[1], mapMarkerItem[2], mapMarkerItem[0]);
    htmlMarker.setMap(map);


    // Set Map Bounds to Auto-center
    bounds.extend(myLatLng);
    map.fitBounds(bounds);

    // Push marker to markers array
    //markers.push(marker);
    markers.push(htmlMarker);
  }
}

function initializeMap() {

  var mapOptions = {
    zoom: 2,
    maxZoom: 18,
    minZoom: 2,
    center: new google.maps.LatLng(0, -30),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  makeMapPlotPoints();

}

initializeMap();

#listings,
.results-map-wrapper {
  width: 50%;
  float: left;
}
#map-canvas {
  width: 100%;
  height: 400px;
}
.htmlMarker {
  background: #f00000;
  color: #ffffff;
  height: 20px;
  width: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="listings">
  <div class="listing-item" data-marker-id="01" data-marker-lng="0" data-marker-lat="0">
    Marker 01
  </div>
  <div class="listing-item" data-marker-id="02" data-marker-lng="0" data-marker-lat="-2">
    Marker 02
  </div>
  <div class="listing-item" data-marker-id="03" data-marker-lng="0" data-marker-lat="-4">
    Marker 03
  </div>
  <div class="listing-item" data-marker-id="04" data-marker-lng="0" data-marker-lat="2">
    Marker 04
  </div>
  <div class="listing-item" data-marker-id="05" data-marker-lng="0" data-marker-lat="4">
    Marker 05
  </div>
</div>

<div class="results-map-wrapper">
  <div id="map-canvas"></div>
</div>

这篇关于如何使用DOM元素的数据属性使用HTML标记（Overlay）填充Google Map的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆