Original: "Baidu Map API" How to make Bubble Magnifier?
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!
Icon:
To run the code, please click here.
Code:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">
<HTMLxmlns= "http://www.w3.org/1999/xhtml">
<Head>
<Metaname= "keywords"content= "Baidu map, Baidu Map API, Baidu Map Customization Tool, Baidu Map WYSIWYG tool" />
<Metaname= "description"content= "Baidu Map API custom map to help users generate Baidu map under the visual operation" />
<Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" />
<title>Bubble Magnifier</title>
<Scripttype= "Text/javascript"src= "Http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true">
</Script>
</Head>
<Body>
<P>Task Description: Click on the red callout in the map and a bubble Magnifier will pop up ~</P>
<Divstyle= "width:520px;height:340px;border:1px solid gray"ID= "Container1"></Div>
</Body>
<Scripttype= "Text/javascript">
varMap1= NewBmap.map ("Container1"); //Create Map1
varmap2;//define MAP2
var Point= NewBmap.point (116.411053,39.950507);
varpoint1=Point ;//determine the center point
varPoint2=Point ;//determine the center point
Map1.centerandzoom (Point1, -); //initializes the map Map1, setting the center point and map level.
Map1.addeventlistener ("MoveEnd",function() {Map2.panto (Map1.getcenter ());}); //let Map2 follow Map1.
varMarker1= NewBmap.marker (point);//Defining Annotations
Map1.addoverlay (marker1);//Add a callout
varwin1= NewBmap.infowindow ("<p> bubble </p><div style= ' width:200px;height:200px;border:1px solid Gray ' id= ' Container2 ' ></ Div>"); //Information window
Marker1.addeventlistener ("Click",functionDisplaypop () {
Marker1.openinfowindow (win1); //Open Window
MAP2= NewBmap.map ("Container2"); //creating a bubble magnifier map2
map2.centerandzoom (Point2, -); //Initialize the map map2 to make the map level and map1 consistent.
}
)
</Script>
</HTML>
"Baidu Map API" How to make Bubble Magnifier?
