JSFiddle - React, Tailwind, and code Playground

by Bouteille Dimitri

HTML

<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClusterer for Baidu Map Example</title>

    <style type="text/css">
        #mapDiv1 { height:80vh; width:90vw; margin:20px }
    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>	
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
  

 </head>
  <body>	
 
    <div id="mapDiv1"></div>
  </body>

   <script type="text/javascript">
       var map = new BMap.Map("mapDiv1");
       map.enableScrollWheelZoom();
       var point = new BMap.Point(116.404, 39.915);
       map.centerAndZoom(point, 4);

       var MAX = 6000;
       var markers = [];
       var pt = null;
       var i = 0;
       for (; i < MAX; i++) {
           markers.push(new BMap.Marker(new BMap.Point(generateRandomLong(), generateRandomLat())));

       }
       var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers, gridSize: 60});


        function generateRandomLong() {
           return (Math.random()*360-180).toFixed(8);
        }
        // LATITUDE -90 to +90
        function generateRandomLat() {
           return (Math.random()*180-90).toFixed(8);
        }
    </script>
</html>