Here are the effects of adding two maps to the page:
The core code of the page is as follows:
Copy codeThe Code is as follows: <style type = "text/css">Var map1 = new BMap. Map ("mapDiv1 ");
Map1.centerAndZoom (new BMap. Point (116.401394, 39.915156), 12 );
Map1.enableScrollWheelZoom ();
Var map2 = new BMap. Map ("mapDiv2", {mapType: BMAP_HYBRID_MAP}); // you can specify a satellite Map as a base Map.
Map2.centerAndZoom (new BMap. Point (116.401394, 39.915156), 12 );
Map2.enableScrollWheelZoom ();
</Script>
The code above can display two side-by-side maps on the same page. If you want to drag or scale the map on the left, the map on the right will also move and zoom, you only need to register the zoomend and moveend events for the map on the left. The Code is as follows:
Copy codeThe Code is as follows: map1.addEventListener ("zoomend", function (){Map1.addEventListener ("moveend", function (){
Map2.zoomTo (map1.getZoom ());
Map2.panTo (map1.getCenter ());
});
The complete code is as follows:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Var map2 = new BMap. Map ("mapDiv2", {mapType: BMAP_HYBRID_MAP}); // you can specify a satellite Map as a base Map.
Map2.centerAndZoom (new BMap. Point (116.401394, 39.915156), 12 );
Map2.enableScrollWheelZoom ();
Map1.addEventListener ("zoomend", function (){
Map2.zoomTo (map1.getZoom ());
Map2.panTo (map1.getCenter ());
});
Map1.addEventListener ("moveend", function (){
Map2.zoomTo (map1.getZoom ());
Map2.panTo (map1.getCenter ());
});
</Script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
