JSFiddle - React, Tailwind, and code Playground

by bk209

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maptalks.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maptalks.min.css">
<div id="map" class="container" style="width:800px;height:600px;border : 1px solid"></div>

JavaScript

var center = [121.49867630004883, 31.25405711739208];
    var map = new maptalks.Map('map', {
      "center":center,"zoom":16,"pitch":0,"bearing":0,
      baseLayer: new maptalks.TileLayer('base', {
        urlTemplate : 'http://webrd{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        subdomains  : ['01','02','03','04']
      })
    });
    const layer = new maptalks.VectorLayer('v').addTo(map);
    
    const symbol={
    	'markerType': 'triangle',
            'markerFill': 'rgb(135,196,240)',
            'markerFillOpacity': 1,
            'markerLineColor': '#34495e',
            'markerLineWidth': 3,
            'markerLineOpacity': 1,
            'markerLineDasharray':[],
            'markerWidth': 40,
            'markerHeight': 40,
            'markerDx': 0,
            'markerDy': 0,
                    markerHorizontalAlignment:'middle',
        markerVerticalAlignment:'middle',
            'markerOpacity' : 1
    }
    
      var marker = new maptalks.Marker(
       center,
        {
          'symbol' : symbol
        }
      ).setInfoWindow({
        'title'     : 'Marker\'s InfoWindow',
        'content'   : 'Click on marker to open.'
			});
      
      var marker_ = new maptalks.Marker(
       [center[0]+0.001,center[1]],
        {
          'symbol' : {
            ...symbol,
            markerRotation:45
          }
        }
      ).setInfoWindow({
        'title'     : 'Marker\'s InfoWindow',
        'content'   : 'Click on marker to open.'
			});
      
      var marker2 = new maptalks.Marker(
       [center[0]+0.002,center[1]],
        {
          'symbol' : {
            ...symbol,
            markerRotation:-45
          }
        }
      ).setInfoWindow({
        'title'     : 'Marker\'s InfoWindow',
        'content'   : 'Click on marker to open.'
			});

      
      layer.addGeometry([marker,marker_,marker2])