javascript - 如何使用 mapplace.js 创建自定义图标

Question

我使用 mapplace.js 创建了以下简单的 map :

<强> FIDDLE HERE 。

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

创建 map 的 pritty 标准代码，现在库说我允许自定义标记，但我没有看到示例，即使当我浏览 API 时我也看不到任何选项， SEE API (请参阅“文档”选项卡)。

现在我在我的应用程序中使用这个库，所以我可以转向使用另一个库，那么如何创建带有自定义图标的 map ？使用mapplace.js？

谢谢。

Answer 1

来自 documentation 中的标记示例您引用:

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
});

working fiddle with custom icons

代码片段:

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>