console
G7SMap.init({
id: 'map',
key: {
'bmap': 'ebAmxZxmn8hHBm1anhEcTH8j',
'gmap': 'AIzaSyBdZt3pUFIFTWKlHqUA_m6GJo_V--k84KU'
}
}).then(function (map) {
var point = new G7SMap.Point(116.308003,39.907569);
var defaultMarker = new G7SMap.Marker(point,{
title:'我是defaultMarker'
});
var marker = new G7SMap.Marker(point, {
icon: G7SMap.library.legend.ICON.TRUCK_STOP_FOCUS,
title: '我是一个marker'
});
map.addOverlay(defaultMarker);
document.querySelector('.add-marker').addEventListener('click', function () {
map.addOverlay(marker);
});
document.querySelector('.remove-marker').addEventListener('click', function () {
map.removeOverlay(marker);
});
document.querySelector('.show-marker').addEventListener('click', function () {
marker.show();
});
document.querySelector('.hide-marker').addEventListener('click', function () {
marker.hide();
});
document.querySelector('.get-icon').addEventListener('click', function () {
alert(JSON.stringify(marker.getIcon()));
});
document.querySelector('.set-icon').addEventListener('click', function () {
var icon = new G7SMap.Icon({
url: 'http://test.resources.g7s.chinawayltd.com/g7smap/v2.0.0/assets/img/POI_start.png',
size: [32, 32],
imageSize: [32, 32],
anchor: [16, 16]
});
marker.setIcon(icon);
});
document.querySelector('.get-pos').addEventListener('click', function () {
var point = marker.getPosition();
alert(point.toString());
});
document.querySelector('.set-pos').addEventListener('click', function () {
var lng = Math.random() + 116.4;
var lat = Math.random() + 39.9;
var point = new G7SMap.Point(lng,lat);
marker.setPosition(point);
});
document.querySelector('.get-title').addEventListener('click', function () {
alert(marker.getTitle());
});
document.querySelector('.set-title').addEventListener('click', function () {
marker.setTitle(G7SMap.randomString());
});
document.querySelector('.get-zindex').addEventListener('click', function () {
alert(marker.getZIndex());
});
document.querySelector('.set-zindex').addEventListener('click', function () {
if (G7SMap.getVendor() == 'bmap') {
alert('百度地图的setZIndex需要在addOverlay方法之前调用');
return false;
}
marker.setZIndex(10000);
});
document.querySelector('.set-top').addEventListener('click', function () {
marker.setTop(true);
});
document.querySelector('.set-rotation').addEventListener('click', function () {
marker.setRotation(30);
});
document.querySelector('.set-drag').addEventListener('click', function () {
marker.setDraggable(true);
});
document.querySelector('.set-effect').addEventListener('click', function () {
marker.setAnimationEffect('drop');
});
defaultMarker.addEvent('click', function () {
console.info('触发点击事件');
});
});
<div id="map" class="map"></div>
<div>
<button class="add-marker">添加marker</button>
<button class="remove-marker">移除marker</button>
<button class="show-marker">显示marker</button>
<button class="hide-marker">隐藏marker</button>
</div>
<div style="margin-top: 10px;">
<button class="get-icon">getIcon</button>
<button class="set-icon">setIcon</button>
<button class="get-pos">getPosition</button>
<button class="set-pos">setPosition</button>
<button class="get-title">getTitle</button>
<button class="set-title">setTitle</button>
<button class="get-zindex">getZIndex</button>
<button class="set-zindex">setZIndex</button>
</div>
<div style="margin-top: 10px;">
<button class="set-top">setTop</button>
<button class="set-rotation">setRotation</button>
<button class="set-drag">setDraggable</button>
<button class="set-effect">setAnimationEffect</button>
</div>
<p>
zindex规则:<br>
1、默认情况下,低纬度marker层级高于高纬度marker,形成一种立体效果<br>
2、不指定zindex时,百度地图和谷歌地图的marker zindex值为undefined<br>
3、百度地图的setZIndex需要在addOverlay方法之前调用,谷歌和高德不限
</p>
.map {
max-width: 800px;
height: 500px;
}
.result {
color: #f60;
}