Question

我想知道如何生成图像，实际上是一个小圆圈颜色和数字作为Googlemaps中的参数？

例如

MakeImage（$ FF0000，5）

将在中心绘制一个带有5号的红色圆圈。没有预先生成所有可能的最佳方法是什么组合成图像文件？

Answer 1

为了实现此目的，您可以创建一个图标作为Symbol界面，并将其与MarkerLabel结合使用。注意符号界面中属性labelOrigin的存在，它定义了放置标签的位置。

为了演示这种方法，我使用了内置的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

我建议您使用自定义标记here和here，您可以找到有据可查的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实例然后，您可以使您的自定义函数使用SVG作为图标属性在地图map内实例化自定义标记。我没有运行此脚本，只是写了解释如何做到这一点的脚本。祝您有美好的一天，希望对您有所帮助（：

Googlemaps中的图像生成器

2 个答案: