PHP源码做地图标记为啥总像没信号的导航？三招教你搞定！

速达网络源码大全 2024-09-24 04:14:39 3

（拍大腿）哎呦喂，你是不是也遇到过这种憋屈事儿？网上扒拉个PHP源码，想给自家奶茶店在地图上标个位置，结果折腾半天要么地图不显示，要么标记点跑到太平洋！今儿咱就把这事儿掰开了揉碎了说，保准看完你也能用PHP源码在地图上精准插旗！

一、选地图API比选奶茶还纠结？

PHP源码做地图标记为啥总像没信号的导航？三招教你搞定！-第1张图片

新手最容易栽在第一步——地图API选型。去年帮开火锅店的老王搞定位，他非要用十年前的老地图接口，结果顾客导航都导到公共厕所！

三大主流地图API对比

平台	优点	坑点
高德地图	定位准，街道细节多	海外地图支持拉胯
百度地图	3D效果炫，开发文档全	商业授权费贵得肉疼
谷歌地图	全球覆盖，街景牛批	国内访问经常抽风

建议新手直接抄网页6的Google Maps方案，虽然要翻墙但文档最全。去年用高德给连锁超市做配送系统，那个逆地理编码准得跟GPS似的。

二、五步搞定基础标记（手把手版）

别被网上那些花里胡哨的教程吓到，核心代码其实就这几行：

**1. 搞API密钥去Google Cloud Platform注册（跟注册微信差不多），记得勾选Maps JavaScript API，这个密钥就是你的"地图门票"。

2. 画地图框
在PHP文件里塞个div当画布，尺寸别抠搜：

php**<div id="map" style="width:800px;height:600px;"></div>

3. 引脚本文件
在里插这段，注意替换YOUR_KEY：

php**<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"></script>

4. 写初始化函数
照着网页7的案例改坐标，38.9072是华盛顿的纬度，改成你家奶茶店的：

php**function initMap() {  var map = new google.maps.Map(document.getElementById('map'), {    zoom: 15,    center: {lat: 38.9072, lng: -77.0369}  });  // 这里加标记点}

5. 插标记图标
在initMap里续上这段，那个iconUrl换成你的奶茶杯图标：

php**var marker = new google.maps.Marker({  position: {lat: 38.9072, lng: -77.0369},  map: map,  title: '老王火锅',  icon: {    url: "icon.png",    scaledSize: new google.maps.Size(50, 50)  }});

上周帮烧烤店老板搞这个，他非要把标记改成烤串图标，结果加载慢得像蜗牛——图片尺寸一定要压缩KB以下啊亲！

三、进阶玩法让地图会说话

基础标记搞定了？来点高级的！去年给快递公司做轨迹追踪，这几个功能直接让甲方加钱：

1. 点击弹详情窗
在marker后面加这段，infoContent里写你的促销信息：

php**var infowindow = new google.maps.InfoWindow({  content: '新客立减5元！
'});marker.addListener('click', function() {  infowindow.open(map, marker);});

2. 批量标连锁店
用PHP从数据库读分店坐标，参考网页8的MySQL方案：

php**$locations = [  ['lat' => 39.9042, 'lng' => 116.4074, 'name' => '朝阳分店'],  ['lat' => 2304, 'lng' => 121.4737, 'name' => '浦东分店']];foreach ($locations as $loc) {  echo "new google.marker({    position: {lat: {$loc['lat']}, lng: {$loc['lng']}},    map: map,    title: '{$loc['name']}'  });";}

3. 画配送范围圈
在initMap里加这个，radius单位是米，5000米就是5公里配送范围：

php**var cityCircle = new google.maps.Circle({  strokeColor: '#FF0000',  strokeOpacity: 0.8,  strokeWeight: 2,  fillColor: '#FF0000',  fillOpacity: 0.35,  map: map,  center: {lat: 38.9072, lng: -77.0369},  radius: 5000});