如何使用地图地点创建自定义图标.js

How to create a custom icon using mapplace.js

本文关键字：自定义 图标 js 创建 何使用 地图      更新时间：2023-09-26

我使用mapplace.js创建了以下简单的地图：

在这里摆弄。

JS代码如下：

$(function() {
  new Maplace({
    locations: [{
      lat: '25.217665',
      lon: '55.2479501',
      zoom: 15
    }],
    controls_on_map: false,
    map_div: '#map',
    type: 'directions',
    map_options: {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    // styles: {
    //         'Night': [{
    //             featureType: 'all',
    //             stylers: [
    //                 { invert_lightness: 'true' }
    //             ]
    //         }],
    //         'Greyscale': [{
    //             featureType: 'all',
    //             stylers: [
    //                 { saturation: -50 },
    //                 { gamma: 0 }
    //             ]
    //         }]
    //     }    

  }).Load();
});

创建地图的标准代码，现在库说我允许自定义标记，但我看不到和示例，即使我浏览 API 时我也看不到任何选项，请参阅 API(请参阅文档选项卡(。

现在我为我的应用程序使用这个库，所以我可以转向使用另一个库，那么如何使用自定义图标创建地图呢？ 使用地图地点.js ？

谢谢。

从您引用的文档的标记示例中：

var LocsA = [{
    lat: 45.9,
    lon: 10.9,
    title: 'Title A1',
    html: '<h3>Content A1</h3>',
    icon: 'http://maps.google.com/mapfiles/markerA.png', // custom icon
    animation: google.maps.Animation.DROP
}, {
    lat: 44.8,
    lon: 1.7,
    title: 'Title B1',
    html: '<h3>Content B1</h3>',
    icon: 'http://maps.google.com/mapfiles/markerB.png', // custom icon
    show_infowindow: false
}, {
    lat: 51.5,
    lon: -1.1,
    title: 'Title C1',
    html: [
        '<h3>Content C1</h3>',
        '<p>Lorem Ipsum..</p>'
    ].join(''),
    zoom: 8,
    icon: 'http://maps.google.com/mapfiles/markerC.png' // custom icon
}];

//Simple Example, dropdown on map
var dropdown = new Maplace({
    map_div: '#gmap-2',
    controls_title: 'Choose a location:',
    locations: LocsA
});
//Simple Example, menu on map
var ullist = new Maplace({
    map_div: '#gmap-3',
    controls_type: 'list',
    controls_title: 'Choose a location:',
    locations: LocsBv2
});

使用自定义图标摆弄

代码片段：

var LocsA = [{
  lat: 45.9,
  lon: 10.9,
  title: 'Title A1',
  html: '<h3>Content A1</h3>',
  icon: 'http://maps.google.com/mapfiles/markerA.png', // custom icon
  animation: google.maps.Animation.DROP
}, {
  lat: 44.8,
  lon: 1.7,
  title: 'Title B1',
  html: '<h3>Content B1</h3>',
  icon: 'http://maps.google.com/mapfiles/markerB.png', // custom icon
  show_infowindow: false
}, {
  lat: 51.5,
  lon: -1.1,
  title: 'Title C1',
  html: [
    '<h3>Content C1</h3>',
    '<p>Lorem Ipsum..</p>'
  ].join(''),
  zoom: 8,
  icon: 'http://maps.google.com/mapfiles/markerC.png' // custom icon
}];
$(function() {
  var mapPlace = new Maplace({
    locations: LocsA,
    controls_on_map: false,
    map_div: '#map',
    type: 'directions',
    show_markers: true,
    map_options: {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
  }).Load();
  mapPlace.directionsDisplay.setOptions({
    suppressMarkers: true
  });
  mapPlace.AddLocations(LocsA);
});
html,
body,
.map {
  height: 100%;
  width: 100%;
}
body {
  padding: 0;
  margin: 0;
}
<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>
<script src="https://maplacejs.com/dist/maplace.js"></script>
<div class="map" id="map"></div>

相关文章：