"Baidu Map API" How to make Bubble Magnifier?

Source: Internet
Author: User

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?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.