反向地理编码代码在JSFiddle可运行但本地HTML文件失效求助

1. 补全DOCTYPE声明 #

你的HTML代码没有在最开头添加<!DOCTYPE html>声明，浏览器会进入怪异渲染模式，此时你定义的html, body, .main { height: 100% }样式不会生效，地图容器没有实际可渲染的高度，导致地图无法显示。
修复方法：在代码第一行<html>标签之前添加以下内容：

<!DOCTYPE html>

2. 解决API访问限制问题 #

你使用的Geoapify API密钥默认会限制允许发起请求的来源，JSFiddle上运行正常是因为示例密钥绑定了JSFiddle的域名，你自己的密钥需要做如下调整：

• 确认你已经将实际运行环境的来源（比如本地服务的localhost、线上部署的域名）添加到密钥的允许访问列表
• 不要直接双击HTML文件用file://协议打开，这种协议的请求会被第三方API拦截，同时浏览器也会存在跨域限制。你可以本地用任意静态文件服务启动项目，通过localhost域名访问即可解决这类问题。

校验方法 #

你可以按F12打开浏览器控制台，切换到Console标签页查看报错信息：如果返回403错误就是API密钥权限问题；如果提示地图容器高度为0就是DOCTYPE导致的样式问题。

内容的提问来源于stack exchange，提问作者Rodolfo Valentim