在 yii2.0.48 中集成地图服务需手动引入 leaflet cdn 或离线资源并处理图标路径,配置百度地图 ak 并验证域名绑定,用 decimal 字段存储经纬度并在模型中校验范围,控制器强制 float 类型转换防注入,通过 response 头或 cors 过滤器启用可控 cors。

在 Yii2.0.48 项目中集成地图服务(如 Leaflet、OpenLayers 或调用高德/百度地图 API)需绕过框架默认的静态资源加载限制,正确注册前端依赖、处理跨域请求,并确保地理坐标数据能被 ActiveRecord 模型安全传递与验证。
引入 Leaflet 地图库到 Yii2.0.48 前端
Yii2.0.48 不自带地图类库,必须手动引入。推荐使用 CDN 加载 Leaflet,避免 vendor 冲突。
打开 frontend/views/layouts/main.php,在 标签前插入:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
这一步不能写在 assets/AppAsset.php 中——因为 Yii2.0.48 的 asset bundle 机制对外部 CDN 支持不稳定,直接内联更可靠。
若需离线部署,下载 leaflet.css 和 leaflet.js 放入 frontend/web/css/ 与 frontend/web/js/,再通过 AppAsset 注册;但注意:Leaflet 的图标资源路径默认指向 images/ 子目录,必须同步复制 marker-icon.png 等文件,否则地图上只显示空白方块。
配置百度地图 JS API(含 AK 验证)
百度地图要求每个域名绑定唯一 AK(Access Key),且必须在页面加载前注入 script 标签,否则初始化失败。
在需要地图的视图文件(如 frontend/views/site/map.php)顶部添加:
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK_HERE"></script>
【YOUR_AK_HERE 必须替换成你在百度地图开放平台申请的真实密钥】
AK 错误会导致控制台报错 Uncaught ReferenceError: BMap is not defined,且无任何提示信息——这是百度 SDK 的静默失败机制,务必提前校验 AK 是否启用、是否绑定当前域名、是否过期。
接着在页面底部写初始化逻辑:
<script>var map = new BMap.Map("map-container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);</script>
将地理坐标存入数据库并验证
Yii2.0.48 的 ActiveRecord 默认不支持 POINT 类型字段,需改用字符串或两个浮点数字段存储经纬度。
第一步:在数据库中创建表字段
ALTER TABLE `location` ADD COLUMN `lat` DECIMAL(10,8) NOT NULL DEFAULT '0.00000000';
ALTER TABLE `location` ADD COLUMN `lng` DECIMAL(10,8) NOT NULL DEFAULT '0.00000000';
第二步:在模型 common/models/Location.php 中添加规则
public function rules() { return [ [['lat', 'lng'], 'number', 'min' => -90, 'max' => 90], [['lng'], 'number', 'min' => -180, 'max' => 180], ]; }
第三步:在控制器接收坐标时强制转换类型,防止字符串注入
$model->lat = (float) $request->post('lat');
$model->lng = (float) $request->post('lng');
不做强制类型转换可能导致 MySQL 插入 '116.404abc' 这类非法值,虽字段为 DECIMAL,但 PDO 默认不报错,仅截断为 116.404,埋下数据精度隐患。
启用 CORS 支持以调用第三方地图接口
Yii2.0.48 默认禁止跨域请求,调用高德、腾讯等 REST API 时会触发浏览器拦截。
方法一:在 frontend/config/main.php 的 components 中添加 response 头
'response' => [ 'class' => 'yii\web\Response', 'on beforeSend' => function ($event) { $response = $event->sender; $response->headers->set('Access-Control-Allow-Origin', '*'); $response->headers->set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); $response->headers->set('Access-Control-Allow-Headers', 'Content-Type, Authorization'); }, ],
方法二(更安全):仅对特定控制器启用,在控制器类开头加
public function behaviors() { return [ 'corsFilter' => [ 'class' => \yii\filters\Cors::class, 'cors' => [ 'Origin' => ['http://localhost:8080', 'https://yourdomain.com'], 'Access-Control-Request-Method' => ['GET', 'POST'], 'Access-Control-Request-Headers' => ['*'], ], ], ]; }
【生产环境严禁使用 * 通配 Origin】
使用 * 会导致 Cookie 和 Authorization 头被浏览器丢弃,后续登录态无法透传;必须显式列出可信域名。











