JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
    <style type="text/css">
      html, body, #basicMap {
          width: 100%;
          height: 100%;
          margin: 0;
      }
    </style>

    <div id="basicMap"></div>

JavaScript

(function(){
    var map;
        function initMap() {
            var options = {
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                units: "m",
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                                 20037508.34, 20037508.34),
                numZoomLevels: 20,
                controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.MousePosition({})
                  ]
            };

            var url = 
              "http://a.tile.cloudmade.com/fd093e52f0965d46bb1c6c6281022199/3/256/${z}/${x}/${y}.png";
            map = new OpenLayers.Map("basicMap",options);
            var newL = new OpenLayers.Layer.OSM("Default", url);

            map.addLayer(newL);

            var zoom = 7;
            var lonLat = new OpenLayers.LonLat(121.494,31.26).transform(
                new OpenLayers.Projection("EPSG:4326"), 
                map.getProjectionObject());
            map.setCenter(lonLat, zoom);
            
            poiLayer = new OpenLayers.Layer.Vector('myPoiLayer');
            
            var myControl = new OpenLayers.Control.SelectFeature(poiLayer, {
                hover: true,
                highlightOnly: true,
                eventListeners: {
                    beforefeaturehighlighted: showQtip,

                }
            });

            var features = new Array(0);
            features[0] = poi("上海", 31.30, 120.6);
            features[1] = poi("无锡", 31.6, 120.30);
            features[2] = poi("苏州", 31.26, 121.494);  

            poiLayer.addFeatures(features);

            map.addLayer(poiLayer);
            map.addControl(myControl);
            myControl.activate();
            
    };
    
    function poi(item, lat, long ) {
        
          ...