Baidu Maps Support

How to implement Baidu Maps with Woosmap Store Locator JS API

Woosmap Store Locator JS API allows 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).

HTML
        <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.

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

    

Load asynchronously the Woosmap Store Locator JS API with the method load(options) of helper class WoosmapLoader.

JavaScript
        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.

JavaScript
        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.

Was this article helpful?
Have more questions? Submit a request