Генератор изображений в Googlemaps

Question

Интересно, как я могу создать изображение, на самом деле маленький круг с цветом и числом в качестве параметра в Googlemaps?

Так например

MakeImage ($ FF0000, 5)

Нарисует красный круг с цифрой 5 в центре. Каков наилучший подход без выработки всего возможного комбинации в виде графических файлов?

Answer 1

Для этого вы можете создать иконку в виде Symbol интерфейса и объединить его с MarkerLabel . Обратите внимание на наличие свойства labelOrigin в интерфейсе Symbol, оно определяет, куда вы поместите метку.

Чтобы продемонстрировать этот подход, я использовал встроенный SVG-путь google.maps.SymbolPath.CIRCLE. Взгляните на следующий пример и запустите его, чтобы увидеть круг Маркер с номером.

function initMap() {
    var myLatLng = {lat: 47.363362, lng: 8.485823};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!',
      icon: {
        fillColor: "#FF0000",
        strokeColor: "#FF0000",
        path: google.maps.SymbolPath.CIRCLE,
        scale: 8,
        labelOrigin: new google.maps.Point(0,0)
      },
      label: {
        text: "5",
        color: "white",
        fontWeight: "bold",
        fontSize: "16px"
      }
    });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">
    </script>

Надеюсь, это поможет!

Answer 2

Я предлагаю вам использовать пользовательские маркеры, здесь и здесь вы можете найти хорошо документированный API, и объясняется, как создавать маркеры с растровыми изображениями и SVG-графикой. Я предлагаю использовать обозначение пути SVG следующим образом:

var map;
var my_location = { lat: 12.97, lng: 77.59 };

icon = {
     //this is a string that define a circle path
     path: "M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0",
     //this is a string that defines a hex color
     fillColor: '#FF0000',
     //this is a float that defines the opacity value from 0.0 to 1
     fillOpacity: .6,
     //this is a couple that defines a center point for the SVG
     anchor: new google.maps.Point(0,0),
     //this is a integer that defines the scale factor
};
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 16,
      center: new google.maps.LatLng(-33.91722, 151.23064),
      mapTypeId: 'roadmap'
    });
function makeMarkerWithImageCircle(text,location){
     var iconUrl = 'https://your_circl_image_url.png';
     var marker = new google.maps.Marker({
          position: location,
          label: text,
          icon: iconUrl,
          map: map
     });
}
function makeMarkerWithSVGCircle(text,location){
     var marker = new google.maps.Marker({
          position: location,
          label: text,
          draggable: false,
          icon: icon,
          map: map
     });
}
//method to generate marker with custom image url and text
makeMarkerWithImageCircle("text",my_location);
//method to generate marker with custom svg and text
makeMarkerWithSVGCircle("text",my_location);

Я полагаю, у вас есть initMap() метод, в котором вы инициализируете экземпляр Map Затем вы можете создать свою пользовательскую функцию для создания пользовательского маркера на карте map с SVG в качестве свойства значка. Я не запускал этот скрипт, просто написал, чтобы объяснить, как вы можете это сделать. Хорошего дня, и я надеюсь, что это было полезно (: