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