如何使用

Question

我创建使用mapplace.js以下简单的地图mapplace.js创建一个自定义图标：

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

的pritty标准的代码来创建一个地图，现在的库说，我允许自定义标记，但我没有看到和榜样，甚至当我上网的API我见没有选项，SEE API（见文档标签）。

现在我使用这个库为我的应用程序，所以我可以转移到使用另一个库，那么如何创建一个自定义图标的地图？使用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>