如何添加 Google 地图叠加层

Question

我正在尝试在列表网站上集成谷歌地图以显示带有列表的位置。 我想在地图上显示类别图标而不是通常的标记，我尝试了标记图标，但我有一种感觉，当添加更多类别时，它会在将来产生一些问题，我想为此使用很棒的字体，我已经尝试过了这么多库，但似乎都没有提供解决方案，我现在已经解决了我知道可以处理 html 元素的 Overlays，但我不确定如何将它集成到此代码中..这是我的代码

function load_map(keyword, category) {
  var map = new google.maps.Map(document.getElementById('indexmap'), {
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;
  var markers = new Array();
  var jsondt;
  var jsonfile;
  var results = [];

  $.getJSON("<?php echo osc_base_url(); ?>?soko-ajax=maps-items", function(data) {
    jsondt = data.markersmap;
    for (i = 0; i < jsondt.length; i++) {
      if (keyword != 'all' && category != 'all') {
        if (jsondt[i].country == keyword && jsondt[i].category == category) {
          results.push(jsondt[i]);
        }
      } else if (keyword == 'all' && category != 'all') {
        if (jsondt[i].category == category) {
          results.push(jsondt[i]);
        }
      } else if (keyword != 'all' && category == 'all') {
        if (jsondt[i].country == keyword) {
          results.push(jsondt[i]);
        }
      } else {
        results.push(jsondt[i]);
      }
    }

    for (i = 0; i < results.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(results[i].latitude, results[i].longitude),
        map: map,
        icon: "<?php echo osc_current_web_theme_url();?>" + results[i].image
      });

      markers.push(marker);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(results[i].content);
          infowindow.open(map, this);
        }
      })(marker, i));

    }

    var bounds = new google.maps.LatLngBounds();
    $.each(markers, function(index, marker) {
      bounds.extend(marker.position);
    });
    map.fitBounds(bounds);
    map.setZoom(2);
  });
}

load_map('all', 'all');

});

Answer 1

我想我找到了解决方案..`$(function() {

            function CustomMarker(latlng, map, args) {
                this.latlng = latlng;   
                this.args = args;   
                this.setMap(map);
            }

            CustomMarker.prototype = new google.maps.OverlayView();

            CustomMarker.prototype.draw = function() {

                var self = this;

                var i = this.i;

                if (!i) {

                    i = this.div = document.createElement('i');

                    i.className = 'map-category fa-2x fa '+self.args.class;

                    if (typeof(self.args.marker_id) !== 'undefined') {
                        i.dataset.marker_id = self.args.marker_id;
                    }


                    var panes = this.getPanes();
                    panes.overlayImage.appendChild(i);
                }

                var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

                if (point) {
                    i.style.left = (point.x - 15) + 'px';
                    i.style.top = (point.y  -51) + 'px';
                }
            };//category overlay

            function load_map(keyword,category){
                var map = new google.maps.Map(document.getElementById('indexmap'), {
                    zoom: 2,     
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var infowindow = new google.maps.InfoWindow();

                var marker, i;
                var markers = new Array();
                var jsondt;
                var jsonfile;
                var fillColors = Array('#10A592', '#F54F4D', '#5489DE', '#FF9900', '#EA6164', '#5F7225', '#8D671C', '#DC2C6E', '#03956D', '#705950', '#119717', '#029440', '#8FB442', '#6E7A87', '#0787C4', '#A75E99', '#28825D');              
                var results = [];

                $.getJSON("<?php echo osc_base_url(); ?>?soko-ajax=maps-items", function(data) { 
                    jsondt = data.markersmap;         
                    for(i = 0; i < jsondt.length; i++) { 
                      if(keyword != 'all' && category != 'all'){
                          if(jsondt[i].country == keyword && jsondt[i].category == category){
                              results.push(jsondt[i]);
                          }
                      }else if(keyword == 'all' && category != 'all'){ 
                          if(jsondt[i].category == category){
                              results.push(jsondt[i]);
                          }
                      }else if(keyword != 'all' && category == 'all'){
                          if(jsondt[i].country == keyword){
                             results.push(jsondt[i]);
                          }
                      }else{
                            results.push(jsondt[i]);                
                      }
                    }

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

                        var myLatlng = new google.maps.LatLng(results[i].latitude, results[i].longitude); 

                        marker = new google.maps.Marker({
                          position: myLatlng,
                          map: map,
                          icon: { url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(

                              [
                             '<?xml version="1.0"?>',
                                '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40.248px" height="56.567px" viewBox="0 0 40.248 56.567" enable-background="new 0 0 40.248 56.567" xml:space="preserve">',
                                    '<g xmlns="http://www.w3.org/2000/svg">',
                                        '<path fill="#ffffff" d="M 34.568 20.414 c -0.005 -8.39 -6.487 -15.319 -14.421 -15.419 C 11.473 4.886 4.631 11.66 4.617 20.37 c -0.014 8.932 6.059 15.04 14.955 15.045 C 28.488 35.419 34.573 29.333 34.568 20.414 Z" />',
                                        '<path fill="'+fillColors[i]+'" d="M 31.87 2.957 C 25.867 -1.077 13.928 -0.966 8.09 3.179 C 1.602 7.787 -1.827 16.909 0.997 24.5 C 5.31 36.096 12.302 46.202 20.186 56.567 c 7.904 -10.353 14.956 -20.608 19.148 -32.413 C 42.077 16.428 38.372 7.327 31.87 2.957 Z M 4.617 20.37 c 0.014 -8.71 6.856 -15.483 15.53 -15.375 c 7.934 0.1 14.417 7.029 14.421 15.419 c 0.005 8.919 -6.08 15.006 -14.997 15.001 C 10.676 35.41 4.604 29.301 4.617 20.37 Z" />',
                                    '</g>',
                                '</svg>'
                             ].join('\n')

                          ) }//"<?php //echo osc_current_web_theme_url();?>" + results[i].image
                        });

                        markers.push(marker);

                        google.maps.event.addListener(marker, 'click', (function(marker,i) { 
                            return function() { 
                                infowindow.setContent(results[i].content);
                                infowindow.open(map, this);                     
                            }
                        })(marker, i));

                        overlay = new CustomMarker(myLatlng, map,{marker_id: '123', class: '<?php echo soko_category_icon(0); ?>'});

                    }

                    var bounds = new google.maps.LatLngBounds();
                        $.each(markers, function (index, marker) {
                        bounds.extend(marker.position);
                    });      
                    map.fitBounds(bounds);
                    map.setZoom(2); 
                }); 
            }

            load_map('all','all');

`