javascript 개발 Baidu 지도
1. 콘텐츠를 완성하고 업종에 따라 다른 아이콘을 표시합니다(A, B, C, D, E)(완료)
2. 표시 지점을 클릭하면 제목이 나타납니다. markerArr 배열 각각, Yetai 현재 마커 포인트 내용이 팝업될 수 있지만 항상 markerArr 배열의 마지막 데이터가 됩니다. 마커 포인트를 클릭한 후 해당 마커 포인트 배열 정보를 어떻게 팝업할 수 있습니까?
조언 좀 부탁드립니다. 정말 감사하겠습니다. 감사합니다.
<!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> 
![[웹 프런트엔드] 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, 초기 규모=1.0, 최대 규모=1.0, 최소 규모=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> <스타일 유형="텍스트/css"> body, html,#allmap {width: 100%;height: 100%;overflow: Hidden;margin:0;font-family:"微软雅黑";} </style></head><body> <div id="allmap"></div></body><script 언어="JavaScript"> var markerArr = [ > ; tel: "010-88888888", Yetai:"Y" }, { title: "이름: Supermarket Fa(Shuangyushu Store)" , 지점: "116.331637,39.973424", 주소: "베이징 하이뎬 구 북삼환로 서쪽 7호, Shuangyushu Xili Road", 전화: "010-62640346", 예타이:"A" }, { 제목: "이름: Supermarket Fa (Science City Store)", 지점: "116.324596,39.986931", 주소: "Haidian No. 77, Zhongguancun South Road, District", 전화: "010-62551377", Yetai:"B" }, { 제목: "이름: Supermarket Fa(Weigongcun Store)", 지점: "116.326296,39.960478", 주소: "주소: Beijing Shanglin 01, Floor 2, No. 1, Weigongcun Street, Haidian District, 전화: "010-88570042 ", Yetai:"C" }, { 제목: "이름: Supermarket Fa(Baiyi Road Store)", 지점: " 116.33458,39.951854", 주소: "주소: Floor Shop, No. 22, South District, China Meteorological Administration 커뮤니티, 하이뎬 구, 베이징", 전화: "010-58995553", 예타이:"D" }, { 제목: "이름: 슈퍼마켓 전송(상디 상점)", 지점: "116.318805,40.03683", 주소: "주소: No. 19-3, Shangdi Information Road", tel: "010-62971745", Yetai:"E" }, { title: "이름: 슈퍼마켓(xxxx 매장)", 지점: "116.318805,40.03620", 주소: " No., Beisanhuan West Road, Haidian District, Beijing", 전화: "010-62640346", Yetai: "A" }, | map.centerAndZoom(new BMapGL.Point(116.333405,39.974042), 13); //지도 초기화, 중심점 좌표 및 지도 수준 설정 map.enableScrollWheelZoom(true) //사용자 정의 비즈니스 아이콘 이미지 주소 및 크기 var zIcon = new BMapGL.Icon('images/z.png',new BMapGL.Size(30,30))) //슈퍼마켓 본사 건물 var aIcon = new BMapGL.Icon('images/a .png ',new BMapGL.Size(30,30)); //종합 슈퍼마켓 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)); //라이프스타일 슈퍼마켓 var dIcon = new BMapGL.Icon('images/d.png',new BMapGL. Size( 30,30)); //신선식품 슈퍼마켓 var eIcon = new BMapGL.Icon('images/e.png',new BMapGL.Size(30,30)); //커뮤니티 슈퍼마켓 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)) ; //슈퍼마켓 Faluosen*** var hIcon = new BMapGL.Icon('images/h.png',new BMapGL.Size(30,30)) //협력 매장 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)) / /비상용품 //저장 위도 및 경도 배열 var point = new Array(); var marker = new Array(); //저장 프롬프트 정보 창 객체 배열 var info = new Array(); // 메시지를 보낼 정보창 설정 var opts = {height:100,width:200}; //循环输출markerArr数组内数组 for (var i = 0;i
어떤 주석을 클릭하더라도 마지막 정보가 출력됩니다. 이는 주로 범위의 문제입니다.
클로저를 사용하여 해결:
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;
함수에 위도와 경도, 표시 정보를 별도로 입력하고 즉시 모니터링을 추가하세요.
조언 좀 부탁드려요. 아무도 모르나요?
조언 좀 부탁드립니다. 정말 감사합니다. 감사합니다