<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><styletype= "Text/css">body, HTML, #allmap{width:100%;Height:100%;Overflow:Hidden;margin:0;}#l-map{Height:100%;width:78%;float: Left;Border-right:2px solid #bcbcbc;}#r-result{Height:100%;width:20%;float: Left;}</style><Scripttype= "Text/javascript"src= "http://api.map.baidu.com/api?v=1.4"></Script><Scripttype= "Text/javascript"src= "Http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></Script><Scripttype= "Text/javascript"src= "Http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></Script><title>19.1 Bubble Magnifier</title></Head><Body><Divstyle= "Float:left;"><P>MAP1</P><Divstyle= "width:520px;height:340px;border:1px solid gray"ID= "Container1"></Div></Div></Body></HTML><Scripttype= "Text/javascript"> varMap1= NewBmap.map ("Container1"); varmap2; var Point= NewBmap.point (116.404, 39.915); varpoint1=Point ; varPoint2=Point ; Map1.centerandzoom (Point1, -); varMarker1= NewBmap.marker (point);//Defining AnnotationsMap1.addoverlay (marker1);//Add a callout varwin1= NewBmap.infowindow ("<p> bubble </p><div style= ' width:200px;height:200px;border:1px soild Gray ' id= ' Container2 ' ></ Div"); Marker1.addeventlistener ("Click", functionDisplaypop () {Marker1.openinfowindow (win1);//Open WindowMAP2= NewBmap.map ("Container2"); //creating a bubble magnifier map2map2.centerandzoom (Point2, -); }); </Script>
Task Description:
I don't like the scaling controls provided by the API Yes ...
Can I use other methods to enlarge the map?
Of course, the broad!
Now let's teach you how to make a lovely bubble magnifier !
With it, you can enlarge any detail on the map.
How to achieve:
Create a main map map1, create a callout on the main map, and add an information window to the callout.
In the Info window, create a small map with a map level of 18 (big enough).
The default Settings Information window is closed, and clicking on the red Callout opens the Info window.
Operation Try:
Click on the red callout and the bubble Magnifier will pop up immediately!
You can also try to move the main map, the map inside the bubble Magnifier will also change!
Baidu map How to make bubble Magnifier?
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
