JSFiddle - React, Tailwind, and code Playground

by xianjian

HTML

<link rel="stylesheet" href="http://libs.baidu.com/fontawesome/4.0.3/css/font-awesome.css">
<script src="http://api.map.baidu.com/api?v=2.0&amp;ak=84lKxqXtyj4NY2g6Ii7DIKoE"></script>
<div id="map"></div>

CSS

body, html,#map{margin:0;width:100%;height:100%;overflow: hidden;}
#searchbox{
    width:250px;
    background:#fff;
    border:1px solid #ccc;
    text-align:center;
    padding:10px 0;
}

#controlbox{
  cursor:pointer;
  border:1px solid #ccc;
  background:#fff;
  padding:0 5px;
}
#controlbox i{margin:5px;color:#9cf}
#controlbox i:hover{color:#2d89ef}

JavaScript

var strs = location.href.split('#');
function addFavorite(sURL, sTitle) { 
  try { 
        window.external.addFavorite(location.href+sURL, sTitle);
    } catch (e) {
        try {
            window.sidebar.addPanel(sTitle, location.href+sURL, ""); 
        } catch (e) {
           location.href=strs[0]+sURL;
           alert("加入收藏失败,请使用Ctrl+D进行添加");
        }   
    }   
}
var tool = document.getElementById('tool');
var map = new BMap.Map("map");

var point = new BMap.Point(106.589851,29.566096);
map.centerAndZoom(point,15); 

map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.OverviewMapControl({isOpen:true,anchor: BMAP_ANCHOR_TOP_RIGHT}));
function ZoomControl(){
  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
  this.defaultOffset = new BMap.Size(80, 10);
}
ZoomControl.prototype = new BMap.Control();
ZoomControl.prototype.initialize = function(map){
  var div = document.createElement("div");
  var span1 = document.createElement("i");
  var span2 = document.createElement("i");
  span1.title="显示/隐藏 搜索框";
  span1.onclick=function(){
    if(myCtrl.isVisible()){
       myCtrl.hide();
    }else{
      myCtrl.show();
    }
  };
  span2.title="添加到收藏夹";
  span2.onclick=function(){
    var point = map.getCenter();
    var zoom = map.getZoom();
    var url ='#'+point.lng+'|'+point.lat+'|'+zoom;
    addFavorite(url,'我的位置');
  };
  span1.className="fa fa-search";
  span2.className="fa fa-star";
  div.id="controlbox";
  div.appendChild(span1);
  div.appendChild(span2);
  map.getContainer().appendChild(div);
  return div;
}
var myZoomCtrl = new ZoomControl();
map.addControl(myZoomCtrl);



function MyControl(){
  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
  this.defaultOffset = new BMap.Size(80, 40);
}
MyControl.prototype = new BMap.Control();
MyControl.prototype.initialize = function(map){
  var div = document.createElement("div");
  div.id="searchbox";
  var input1 = document.createElement("input");
  var input2 =...