Javascript API

Baidu Maps Support

Basic implementation of Baidu Maps with Woosmap

Woosmap SDK allows Woosmap developers to display Assets over Baidu Maps in a transparent way.

Add Woosmap Loader and Baidu Maps SDKs right inside your HTML file (both could be loaded asynchronously). For Baidu, specify your Application Key ak as a parameter of your SDK (check Blog Post on Baidu Map for more details).

<script src="https://api.map.baidu.com/api?v=2.0&ak=xXxxXXX1x3x223xxXX"></script>
<script src="https://sdk.woosmap.com/locator/loader.js"></script>

Add an HTML Element Container with some style to render the Map in full size. This Container must exist in the DOM before loading the map.

<div id="my-map" style="position:absolute; top:0; left:0; right:0; bottom:0;">
</div>

Load asynchronously the Woosmap Javascript SDK with the method load(options) of helper class WoosmapLoader.

const loadOptions = {
  version: '1.4',
  publicKey: 'starbucks-demo-woos',
  callback: main,
  loadJQuery: false
};

if (window.attachEvent) {
  window.attachEvent('onload', function() {
    WoosmapLoader.load(loadOptions);
  });
} else {
  window.addEventListener('load', WoosmapLoader.load(loadOptions), false);
}

Finally, within the WoosmapLoader callback, create a new BMap.Map. The HTML container element id or element object (my-map is the Id in our case) is given as argument. Pass this BMap Object to your woosmap.BaseView (here a TiledView) and you will see the Map with your Assets.

function getMap() {
  const map = new BMap.Map('my-map');
  map.centerAndZoom(new BMap.Point(116.3964, 39.9093), 14);
  map.enableScrollWheelZoom();
  return map;
}

function main() {
  const map = getMap();
  const mapView = new woosmap.TiledView(map, woosmapOptions);
}

Check Blog Post on Baidu Map for more details.