Home > Developer > Web Develop
The Baidu map API function adds an information window to multiple points. The api window
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"/>
<Style type = "text/css">
Body, html {width: 100%; height: 100%; margin: 0; font-family: "";}
# Allmap {width: 100%; height: 500px ;}
P {margin-left: 5px; font-size: 14px ;}
</Style>
<Script type = "text/javascript" src = "http://api.map.baidu.com/api? V = 2.0 & ak = your key "> </script>
<Script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>
<Title> Add information window to multiple Points </title>
</Head>
<Body>
<Div id = "allmap"> </div>
<P> click the annotation point to view the simple information window composed of plain text </p>
</Body>
</Html>
<Script type = "text/javascript">
// Baidu map API Function
Map = new BMap. Map ("allmap ");
Map. centerAndZoom (new BMap. Point (114.283849, 30.581112), 15 );
Var data_info = [
[114.283849, 30.581112, "Address: Layer 8, Lotte intime department store, No. 88 Wangfujing Street, Dongcheng District, Beijing"],
[114.283849, 30.582112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.283849, 30.583112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.283849, 30.584112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.283849, 30.585112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.283849, 30.586112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.283849, 30.587112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.283849, 30.588112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.283849, 30.589112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.284849, 30.581112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.285849, 30.581112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.286849, 30.581112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.287849, 30.581112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.288849, 30.581112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.288849, 30.581112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.288849, 30.582112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.288849, 30.583112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.288849, 30.584112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.288849, 30.585112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.288849, 30.586112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.288849, 30.587112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.288849, 30.588112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.288849, 30.589112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.287849, 30.589112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.286849, 30.589112, "Address: donghuamen Street, Dongcheng District, Beijing"],
[114.285849, 30.589112, "Address: donghuamen Street, Dongcheng District, Beijing"]
];
Var opts = {
Width: 250, // information window width
Height: 80, // information window height
Title: "Information Window", // information window title
EnableMessage: true // set to allow the message window to send Short Messages
};
For (var I = 0; I <data_info.length; I ++ ){
Var marker = new BMap. Marker (new BMap. Point (data_info [I] [0], data_info [I] [1]); // create Annotation
Var content = data_info [I] [2];
Map. addOverlay (marker); // Add the annotation to the map
AddClickHandler (content, marker );
}
Function addClickHandler (content, marker ){
Marker. addEventListener ("click", function (e ){
OpenInfo (content, e )}
);
}
Function openInfo (content, e ){
Var p = e.tar get;
Var point = new BMap. Point (p. getPosition (). lng, p. getPosition (). lat );
Var infoWindow = new BMap. InfoWindow (content, opts); // create an information window object
Map. openInfoWindow (infoWindow, point); // open the Information Window
}
</Script>
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
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
