• 日期: 2025-09-15
  • 标签: 常规

{/'title/':/'百度地图开发示例/',/'description/':/'百度地图开发示例/',/'keywords/':/'百度地图, 开发, 示例/',/'content/':/'//n//n//n//t<meta charset=///'utf-8///'>//n//t百度地图开发示例//n//t<style type=///'text/css///'>//n//t//t#mapContainer {//n//t//t//tposition: absolute;//n//t//t//twidth: 100%;//n//t//t//theight: 100%;//n//t//t}//n//t//n//n//n<div id=///'mapContainer///'>//n

//n<script type=///'text/javascript///' src=///'http://api.map.baidu.com/api?v=3.0&ak=your_ak///'>//n<script type=///'text/javascript///' src=///'static/admin_img/map/js/infoBox.js///'>//n<script type=///'text/javascript///'>//n//t// 初始化地图//n//tvar map = new BMap.Map(///'mapContainer///');//n//tvar point = new BMap.Point(108.34138, 22.819153); //定义一个中心点坐//n//t//let cityName = ///'南宁市///';//n//t//map.setCenter(cityName); // 设置地图显示的城市 此项是必须设置的//n//tmap.centerAndZoom(point, 16);//n//tmap.setMapStyle({style: //'midnight//'});//n//tmap.enableScrollWheelZoom();//n//tmap.addControl(new BMap.ScaleControl()); // 添加比例尺控件//n//tmap.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件//n//tmap.enableScrollWheelZoom();//n//tmap.addControl(new BMap.NavigationControl({//n//t//ttype: BMAP_NAVIGATION_CONTROL_LARGE,//n//t//tanchor: BMAP_ANCHOR_TOP_LEFT,//n//t//toffset: new BMap.Size(40, 250)//n//t}));//n//n//t// 自定义信息窗样式//n//tvar infoBoxStyle = {//n//t//twidth: ///'200px///',//n//t//theight: ///'100px///',//n//t//tborder: ///'1px solid #ccc///',//n//t//tborderRadius: ///'5px///',//n//t//tbackgroundColor: ///'#000///',//n//t//tpadding: ///'10px///',//n//t//tfontSize: ///'14px///',//n//t//tlineHeight: ///'20px///',//n//t//tcolor: ///'#fff///',//n//t};//n//n//t// 添加多个标注//n//tvar markers = [//n//t//t{point: new BMap.Point(108.361812, 22.819742), title: ///'反恐点1///', content: ///'这是标注1的内容///'},//n//t//t{point: new BMap.Point(108.341304, 22.819313), title: ///'反恐点2///', content: ///'这是标注2的内容///'},//n//t//t{point: new BMap.Point(108.328287, 22.824908), title: ///'反恐点3///', content: ///'这是标注3的内容///'}//n//t];//n//n//tfor (var i = 0; i < markers.length; i++) {//n//t//tvar marker = new BMap.Marker(markers[i].point);//n//t//tconsole.log(markers[i].title);//n//t//tmap.addOverlay(marker);//n//n//t//t// 创建信息窗实例//n//t//tvar infoBox = new BMapLib.InfoBox(map, markers[i].content, {//n//t//t//tboxStyle: infoBoxStyle,//n//t//t//tcloseIconMargin: ///'10px 10px 0 0///',//n//t//t//tenableAutoPan: true,//n//t//t//talign: ///'INFOBOX_AT_TOP///'//n//t//t});//n//n//t//t// 点击标注时打开信息窗//n//t//tmarker.addEventListener(///'click///', (function (infoBox) {//n//t//t//treturn function () {//n//t//t//t//tinfoBox.open(this);//n//t//t//t};//n//t//t})(infoBox));//n//n//t//t// 点击信息窗的关闭按钮时关闭信息窗//n//t//tinfoBox.addEventListener(///'close///', function () {//n//t//t//tinfoBox.close();//n//t//t});//n//n//t//t// 添加信息窗标题和关闭按钮//n//t//tvar infoBoxContent = document.createElement(///'div///');//n//t//tinfoBoxContent.innerHTML = ///'

///' + markers[i].title + ///'

///' +//n//t//t//t///'<a href=//'javascript:void(0);//' onclick=//'closeInfoBox()//'>关闭///';//n//t//tinfoBox.setContent(infoBoxContent);//n//t}//n//n//t// 关闭当前信息窗//n//tfunction closeInfoBox() {//n//t//tinfoBox.close();//n//t}//n//n//n/


原文地址: https://www.cveoy.top/t/topic/pM9w 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录