Développement Javascript Baidu map
1. Complétez le contenu et marquez différentes icônes en fonction des différents types d'entreprise (A, B, C, D, E) (terminé)
2. Cliquez sur le point de marquage pour faire apparaître le titre dans le tableau marqueurArr respectivement, yetai Actuellement, le contenu du point marqueur peut apparaître, mais ce sera toujours la dernière donnée du tableau marqueurArr. Comment puis-je afficher les informations du tableau de points marqueurs correspondant après avoir cliqué sur un point marqueur ?
Merci de me donner quelques conseils, je vous en serais très reconnaissant, merci.
<!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] Démarrage rapide de Node.js](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"> <titre>BaiDu_Map</titre> <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 {largeur : 100 %;hauteur : 100 %;débordement : caché;margin:0;font-family:"微软雅黑";} </style></head><body> <div id="allmap"></div></body><script langage="JavaScript"> var marqueurArr = [ ; , tél : "010-88888888", yetai : "Y" }, { title : "Nom : Supermarket Fa (Magasin Shuangyushu)" , point : « 116.331637,39.973424 », adresse : « À l'ouest du troisième périphérique nord, district de Haidian, Pékin n° 7, route Shuangyushu Xili », tél : « 010-62640346 », yetai : « A » }, { titre : "Nom : Supermarché (Science City Store)", point : "116.324596,39.986931", Adresse : "Haidian No. 77, Zhongguancun South Road, District", tél. : "010-62551377", yetai : "B" }, { titre : « Nom : Supermarket Fa (Weigongcun Store) », point : « 116.326296,39.960478 », Adresse : « Adresse : Beijing Shanglin 01, étage 2, n° 1, rue Weigongcun, district de Haidian, tél. : « 010-88570042 » , yetai:"C" }, { title: "Nom: Supermarket Fa (Baiyi Road Store)", point: " 116.33458,39.951854", adresse: "Adresse: Floor Shop, No. 22, District Sud, Communauté d'administration météorologique de Chine , District de Haidian, Pékin", tél. : "010-58995553", yetai :"D" }, { titre : "Nom : envoi au supermarché (magasin Shangdi)", point : "116.318805,40.03683", adresse : "Adresse : Non 19-3, Shangdi Information Road", tél : "010-62971745", yetai : "E" }, { titre : "Nom : Supermarché (magasin xxxx)", point : "116.318805,40.03620", adresse : "Non ., Beisanhuan West Road, district de Haidian, Pékin", tél. : "010-62640346", yetai : "A" }, | map.centerAndZoom(new BMapGL.Point(116.333405,39.974042), 13); //Initialiser la carte, définir les coordonnées du point central et le niveau de la carte map.enableScrollWheelZoom(true); //Activer le zoom avec la molette de la souris //Activité personnalisée adresse et taille de l'image de l'icône var zIcon = new BMapGL.Icon('images/z.png',new BMapGL.Size(30,30)); //Immeuble de bureaux du siège du supermarché var aIcon = new BMapGL.Icon('images/a .png ',new BMapGL.Size(30,30)); //Supermarché complet var bIcon = new BMapGL.Icon('images/b.png',new BMapGL.Size(30,30)); var cIcon = new BMapGL.Icon('images/c.png',new BMapGL.Size(30,30)); //Supermarché de style de vie var dIcon = new BMapGL.Icon('images/d.png',new BMapGL. Size( 30,30)); //Supermarché de produits frais var eIcon = new BMapGL.Icon('images/e.png',new BMapGL.Size(30,30)); //Supermarché communautaire 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)) ; //Supermarché Faluosen*** var hIcon = new BMapGL.Icon('images/h.png',new BMapGL.Size(30,30)); //Magasin coopératif 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)) ; / Fournitures d'urgence // Tableau de latitude et de longitude de stockage var point = new Array (); var point = new Array (); // Défini pour permettre à la fenêtre d'informations d'envoyer des messages var opts = {height:100,width:200}; //循环输出markerArr数组内数组 for (var i = 0;i<markerArr.length;i++){ var p0 = MarkerArr[i].point.split(',')[0]; var p1 = marqueurArr[i].point.split(',')[1]; // console.log(windowinfo); point[i] = nouvelle fenêtre.BMapGL.Point(p0,p1); console.log(point[i]); marqueur[i] = nouvelle fenêtre.BMapGL.Marker(point[i]); // console.log(marqueur[i]); //通过业态判断显示标注点图片 switch (markerArr[i].yetai) { case "A": marker[i] = new window.BMapGL.Marker(point[ je],{icon:aIcon}); casser; case "B": marker[i] = new window.BMapGL.Marker(point[i],{icon:bIcon}); casser; case "C": marker[i] = new window.BMapGL.Marker(point[i],{icon:cIcon}); casser; case "D": marker[i] = new window.BMapGL.Marker(point[i],{icon:dIcon}); casser; case "E": marker[i] = new window.BMapGL.Marker(point[i],{icon:eIcon}); casser; case "f": marker[i] = new window.BMapGL.Marker(point[i],{icon:fIcon}); casser; case "l": marker[i] = new window.BMapGL.Marker(point[i],{icon:lIcon}); casser; case "h": marker[i] = new window.BMapGL.Marker(point[i],{icon:hIcon}); casser; case "g": marker[i] = new window.BMapGL.Marker(point[i],{icon:gIcon}); casser; case "i": marker[i] = new window.BMapGL.Marker(point[i],{icon:iIcon}); casser; par défaut : 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); marqueur[i].addEventListener("click", (function (k) { // js 闭包 return function () { //map.center AndZoom(point[k], 18); //marker[k].openInfoWindow( info[k]); console.log(marker); this.openInfoWindow(infoWindow, marqueur[i]); })(i) ); map.addOverlay(marqueur[i]); } }function info_window() {}</script></html>
Peu importe sur quelle annotation vous cliquez, les dernières informations seront affichées. C’est principalement une question de portée.
Utilisez la fermeture pour résoudre :
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;
Mettez la latitude et la longitude et les informations d'affichage séparément dans la fonction. Après la nouvelle marque, ajoutez immédiatement le moniteur.
S'il vous plaît, donnez-moi quelques conseils, personne ne sait ?
S'il vous plaît, donnez-moi quelques conseils, je vous en suis très reconnaissant, merci