javascript Develop Baidu Map
1. Complete the content and mark different icons according to different business types (A, B, C, D, E) (complete)
2. Click to mark Click to pop up the title, yetai and other content in the markerArr array respectively. Currently, the content of the marker point can be popped up, but it will always be the last piece of data in the markerArr array. How can I pop up the corresponding marker point array information after clicking a marker point?
Please give me some guidance, I would be very grateful, thank you.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#allmap{height:100%}
</style>
<script type="text/javascript" src=>
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
var markerArr = [
{
title: "名称：北京超市（总部）",
point: "116.333405,39.974042",
address: "北京市海淀区",
tel: "010-88888888",
yetai:"Y"
},
{
title: "名称：超市发（双榆树店）",
point: "116.331637,39.973424",
address: "北京市海淀区北三环西路双榆树西里7号 ",
tel: "010-62640346",
yetai:"A"
},
{
title: "名称：超市发（科学城店）",
point: "116.324596,39.986931",
address: "海淀区中关村南路77号",
tel: "010-62551377",
yetai:"B"
},
{
title: "名称：超市发（魏公村店）",
point: "116.326296,39.960478",
address: "地址：北京市海淀区魏公村街1号2号楼底商临01",
tel: "010-88570042",
yetai:"C"
},
{
title: "名称：超市发（白颐路店）",
point: "116.33458,39.951854",
address: "地址：北京市海淀区中国气象局社区南区22号楼底商",
tel: "010-58995553",
yetai:"D"
},
{
title: "名称：超市发（上地店）",
point: "116.318805,40.03683",
address: "地址：上地信息路19-3号",
tel: "010-62971745",
yetai:"E"
},
{
title: "名称：超市发（xxxx店）",
point: "116.318805,40.03620",
address: "北京市海淀区北三环西路号 ",
tel: "010-62640346",
yetai:"A"
},
];
function map_init() {
// 创建地图实例
var map = new BMap.Map("allmap");
// 创建点坐标
var point = new BMap.Point(116.333405,39.974042);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 13);
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrlOve);
//第6步：向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
//存放标注点经纬度信息数组
var point = new Array();
//存放标注点对象数组
var marker = new Array();
var marker2 = new Array();
//设置允许信息窗发送消息
var opts = {enableMessage:true};
var info = new Array(); //存放提示信息窗口对象的数组
for (var i = 0;i<markerArr.length;i++){
var p0 = markerArr[i].point.split(",")[0];
var p1 = markerArr[i].point.split(",")[1];
point[i] = new window.BMap.Point(p0,p1);
marker[i] = new window.BMap.Marker(point[i]);
var aIcon = new BMap.Icon("images/a.png", new BMap.Size(30,30));
var bIcon = new BMap.Icon("images/b.png", new BMap.Size(30,30));
var cIcon = new BMap.Icon("images/c.png", new BMap.Size(30,30));
var dIcon = new BMap.Icon("images/d.png", new BMap.Size(30,30));
var eIcon = new BMap.Icon("images/e.png", new BMap.Size(30,30));
var yIcon = new BMap.Icon("images/y.png", new BMap.Size(30,30));
if (markerArr[i].yetai=="A"){
marker[i] = new window.BMap.Marker(point[i],{icon:aIcon});
}else if(markerArr[i].yetai=="B"){
marker[i] = new window.BMap.Marker(point[i],{icon:bIcon});
}else if(markerArr[i].yetai=="C"){
marker[i] = new window.BMap.Marker(point[i],{icon:cIcon});
}else if(markerArr[i].yetai=="D"){
marker[i] = new window.BMap.Marker(point[i],{icon:dIcon});
}else if(markerArr[i].yetai=="E"){
marker[i] = new window.BMap.Marker(point[i],{icon:eIcon});
}else if(markerArr[i].yetai=="Y"){
marker[i] = new window.BMap.Marker(point[i],{icon:yIcon});
}
var content='<input onclick="on()" type="button" value="导航">' + markerArr[i].title;
var infoWindow = new BMap.InfoWindow(content,opts);
marker[i].addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
map.addOverlay(marker[i]);
}
}
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
document.body.appendChild(load);
}
window.onload = map_load;
</script>
</body>
</html> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!doctype html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>BaiDu_Map</title> <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak="></script> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style></head><body><div id="allmap"></div></body><script language="JavaScript"> var markerArr = [ ; , tel: "010-88888888", yetai:"Y" }, { title: "Name: Supermarket Fa (Shuangyushu Store)", point: "116.331637,39.973424", address: " West of North Third Ring Road, Haidian District, Beijing No. 7, Shuangyushu Xili Road", tel: "010-62640346", yetai:"A" }, { title: "Name: Supermarket (Science City Store)", point: "116.324596,39.986931", Address: "Haidian No. 77, Zhongguancun South Road, District", tel: "010-62551377", yetai:"B" }, { title: "Name: Supermarket Fa (Weigongcun Store)", point: "116.326296,39.960478", Address: "Address: Beijing Shanglin 01, Floor 2, No. 1, Weigongcun Street, Haidian District, tel: "010-88570042", yetai:"C" }, { title: "Name: Supermarket Fa (Baiyi Road Store)", point: " 116.33458,39.951854 ", address:" Address: Building 22, Building No. 22, South District, China Meteorological Bureau, Haidian District, Beijing ", Tel:" 010-589955553 ", Yetai:" d "}, {title:" Name: Supermarket Send (Shangdi store)", point: "116.318805,40.03683", address: "Address: No. 19-3, Shangdi Information Road", tel: "010-62971745", yetai:"E" }, { title: "Name : Supermarket (xxxx store)", point: "116.318805,40.03620", address: "No., Beisanhuan West Road, Haidian District, Beijing", tel: "010-62640346", yetai: "A" }, | map.centerAndZoom(new BMapGL.Point(116.333405,39.974042), 13); //Initialize the map, set the center point coordinates and map level map.enableScrollWheelZoom(true); //Enable mouse wheel zoom //Customized business icon image address and size var zIcon = new BMapGL.Icon('images/z.png',new BMapGL.Size(30,30)); //Supermarket headquarters office building var aIcon = new BMapGL.Icon('images/a.png ',new BMapGL.Size(30,30)); //Comprehensive supermarket var bIcon = new BMapGL.Icon('images/b.png',new BMapGL.Size(30,30)); //Food supermarket var cIcon = new BMapGL.Icon('images/c.png',new BMapGL.Size(30,30)); //Lifestyle Supermarket var dIcon = new BMapGL.Icon('images/d.png',new BMapGL.Size( 30,30)); //Fresh food supermarket var eIcon = new BMapGL.Icon('images/e.png',new BMapGL.Size(30,30)); //Community supermarket var fIcon = new BMapGL.Icon( 'images/f.png',new BMapGL.Size(30,30)); //Waifudian var lIcon = new BMapGL.Icon('images/l.png',new BMapGL.Size(30,30)) ; //Supermarket Faluosen*** var hIcon = new BMapGL.Icon('images/h.png',new BMapGL.Size(30,30)); //Cooperative store var gIcon = new BMapGL.Icon(' images/g.png',new BMapGL.Size(30,30)); //Cish*** var iIcon = new BMapGL.Icon('images/i.png',new BMapGL.Size(30,30)) ; //Emergency supplies //Storage latitude and longitude array var point = new Array(); var point = new Array(); var marker = new Array(); //Storage prompt information window object array var info = new Array(); // Set to allow the information window to send messages var opts = {height:100,width:200}; // Circle output output the array in the Markerrar array for (var I = 0; I & LT; Markerrr.Length; I) {var P0 = Markerrrr [i] .split (',') [0]; VAR P1 = Markerrr [ i].point.split(',')[1]; // console.log(windowinfo); point[i] = new window.BMapGL.Point(p0,p1); console.log(point[i]) ; Marker[i] = new window.BMapGL.Marker(point[i]); // console.log(marker[i]); //Display the mark point image based on business status judgment switch (markerArr[i].yetai) { case "A": marker[i] = new window.BMapGL.Marker(point[i],{icon:aIcon}); break; = new window.BMapGL.Marker(point[ i],{icon:bIcon}); break; break; case "D": marker i] = new window.BMapGL.Marker(point[i],{icon:dIcon}); }); break; case "l": marker[i] = new window.BMapGL .Marker(point[i],{icon:lIcon}); break; case "h": marker[i] = new window.BMapGL.Marker(point[i],{icon:hIcon}); break; case "g": marker[i] = new window.BMapGL.Marker(point[i],{icon:gIcon}); break; case "i": marker[i] = new window.BMapGL.Marker(point[i],{icon:iIcon}); break; default: marker[i] = new window.BMapGL.Marker(point[i],{icon:zIcon}); } marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 var content=markerArr[i].title; var infoWindow = new BMapGL.InfoWindow(content,opts); marker[i].addEventListener("click", (function (k) { // js 闭包 return function () { //map.centerAndZoom(point[k], 18); //marker[k].openInfoWindow(info[k]); console.log(marker); this.openInfoWindow(infoWindow, marker[i]); //开启信息窗口 } })(i) ); map.addOverlay(marker[i]); } }function info_window() {}</script></html>
No matter which annotation is clicked, the last piece of information will be output. This is mainly a matter of scope.
Use closure to solve:
var createMark = function(lng, lat, info_html) {
var _marker = new BMap.Marker(new BMap.Point(lng, lat));
_marker.addEventListener("click", function(e) {
this.openInfoWindow(new BMap.InfoWindow(info_html));
}) ;
_marker.addEventListener("mouseover", function(e) { this.setTitle("at: " lng "," lat);
});
return _marker;
Put the longitude, latitude, and display information in separate functions. After the new mark, add monitoring immediately.
Please give me some advice, no one knows?
Please give me some advice, I am very grateful, thank you