现在很多企业网站都会在“联系我们”页面放置地图，用于展示公司位置、导航路线等信息。相比第三方嵌入地图，自定义高德地图的方式更加灵活，可以自由控制样式、缩放、信息窗口、交互逻辑等。
本文以我自己客户网站的地图页面为例，分享一个基于 HTML + JavaScript 的高德地图自定义方案，支持：
自定义地图坐标
自定义 Marker 标记
默认展开信息窗口
禁用鼠标滚轮误触缩放
按住 Ctrl / Shift 后启用地图缩放
iframe 嵌入网站页面
适用于企业官网、WordPress、帝国CMS 等网站
最终效果预览
用户打开页面后：
地图自动定位到指定坐标
默认显示公司名称与地址
点击标记可重新打开信息窗口
鼠标滚轮默认无法缩放地图
按住 Ctrl 或 Shift 后才能缩放
这种方式特别适合企业官网，可以有效避免用户在浏览页面时误缩放地图导致页面滚动异常。
申请高德地图 Key
首先需要去高德开放平台申请 Web 端 Key。
高德开放平台：
注册账号后：
创建应用
选择 Web 端（JS API）
创建 Key
获取你的 API Key
然后将代码中的：
key=你的KEY
替换成你自己的 Key 即可。
完整 HTML 地图代码
下面是完整示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="robots" content="noindex,nofolow">
<title>自定义高德地图</title>
<style type="text/css">
* {margin:0;padding:0}
body, html{width:100%;height:100%;margin:0;font-size:14px;line-height:1.6}
#navigationmap {width:100%;height:100%;overflow:hidden}
#result {width:100%;font-size:12px;}
h1 {font-size:1.2em}
span {display: block}
</style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的KEY"></script>-->
</head>
<body>
<div id="navigationmap"></div>
<script type="text/javascript">
/* 高德地图坐标位置：右键【这是哪儿】>【更多】>【分享】> 【打开链接】*/
var mexinmi = [113.727414,34.770554]; // 位置地点坐标
var map = new AMap.Map("navigationmap", {
resizeEnable: true,
zoom: 10, // 放大级别适合单个地点，根据情况修改数字
center: mexinmi,
scrollWheel: false // **初始禁用滚轮缩放**
});
var factorylabel = "<h1>李志远博客</h1><span><strong>地址：</strong>郑州市郑东新区千玺广场</span>";
var marker = new AMap.Marker({
position: mexinmi,
title: "李志远博客",
map: map // 直接将 `marker` 添加到地图
});
var infowindow = new AMap.InfoWindow({
content: factorylabel,
anchor: "bottom-center",
offset: new AMap.Pixel(0, -30) // 使 `infowindow` 更好地对齐 `marker`
});
// **默认展开 `infowindow`**
infowindow.open(map, marker.getPosition());
// **点击 `marker` 再次打开 `infowindow`**
marker.on("click", function() {
infowindow.open(map, marker.getPosition());
});
// **监听按键按下 (启用滚轮缩放)**
document.addEventListener("keydown", function(event) {
if (event.ctrlKey || event.shiftKey) { // 按住 Ctrl 或 Shift 时启用滚轮缩放
map.setStatus({ scrollWheel: true });
}
});
// **监听按键松开 (禁用滚轮缩放)**
document.addEventListener("keyup", function(event) {
if (!event.ctrlKey && !event.shiftKey) { // 释放 Ctrl 或 Shift 后禁用滚轮缩放
map.setStatus({ scrollWheel: false });
}
});
</script>
</body>
</html>如何获取地图坐标？
打开：
然后：
搜索目标位置
鼠标右键点击地图
选择“这是哪儿”
点击“更多”
点击“分享”
打开分享链接
链接中会出现类似：
113.727414,34.770554
这就是经纬度坐标。
替换这里即可：
var mexinmi = [113.727414,34.770554];
为什么禁用滚轮缩放？
很多网站地图都有一个问题：
用户滑动页面时，鼠标滚轮会误触地图缩放。
体验非常差。
因此我这里做了一个优化：
默认禁止滚轮缩放
只有按住 Ctrl 或 Shift 才允许缩放地图
这会让页面浏览体验好很多，尤其适合 PC 企业官网。
核心代码：
scrollWheel: false
以及：
map.setStatus({ scrollWheel: true });iframe 嵌入网站页面
如果你不想直接把地图代码写进模板页面，可以单独创建一个：
map.html
然后通过 iframe 引入。
例如：
<div class="wrap page-map"> <iframe src="/map.html" sandbox="allow-scripts allow-top-navigation allow-same-origin" loading="lazy"></iframe> </div>
这种方式的优点：
地图与主页面隔离
不影响网站其它 JS
更容易维护
兼容 WordPress、帝国CMS、自定义模板
为什么我不用百度地图？
以前很多网站都在使用百度地图，但现在不少高级功能开始商业收费。
对于普通企业官网来说：
调用量很低
功能需求简单
没必要一年几千甚至上万元
相比之下，高德地图：
JS API 更稳定
文档更清晰
免费额度足够普通网站使用
地图样式更现代
因此目前我做的国内网站已经全面改用高德地图。
七、适合哪些网站？
这个方案非常适合：
企业官网
外贸网站
WordPress 网站
帝国CMS 网站
个人博客
工厂展示网站
联系我们页面
营销型网站
尤其适合需要：
自定义地图样式
提升页面体验
减少 JS 冲突
iframe 隔离加载
的项目。
八、总结
相比直接嵌入地图链接，自定义高德地图拥有更高自由度。
通过：
HTML
CSS
JavaScript
高德 JS API
就能快速实现一个专业的网站地图模块。
本文这套方案已经实际应用在我的各个网站项目中，兼顾：
美观
实用
性能
用户体验
如果你也在做企业网站、博客或者营销型官网，可以直接参考使用。
你觉得文章内容怎么样
14 人参与，0 条评论