SOURCE

console 命令行工具 X clear

                    
>
console
G7SMap.init({
    id: 'map',
    key: {
        'bmap': 'ebAmxZxmn8hHBm1anhEcTH8j',
      	'gmap': 'AIzaSyBdZt3pUFIFTWKlHqUA_m6GJo_V--k84KU'
    }
}).then(function (map) {
    // map即为初始化完成的 G7SMap 地图实例对象
  
  	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;
}

本项目引用的自定义外部资源