基于Google Maps API的路线交互网站地图不加载问题排查求助

你代码中同时存在CSS、HTML、JS三类语法/逻辑错误，全部修复后即可正常加载地图：

1. CSS错误（你怀疑的问题点） #

以下语法错误会导致CSS解析失败，影响地图容器渲染：

• 地图容器样式中单位书写错误：#directions-map 规则内的 padding: 1.2 em; 去掉数值和单位间的空格，改为 padding: 1.2em;
• 按钮伪类选择器书写错误：所有button: hover、button: focus、button: active 去掉冒号和伪类名之间的空格，改为 button:hover、button:focus、button:active
• 字体属性书写错误：body规则内的 font-family 属性值里的_sans-serif 去掉下划线，改为 sans-serif

2. HTML错误 #

• Google Maps API的请求参数名写错：加载API的script地址中?ey=改为?key=，参数名错误会导致API无法正常加载，即便密钥正确也无法调用服务
• ID重复：页面同时存在两个id="directions-info"的元素（span和p），ID必须全局唯一，删除多余的p标签即可

3. JavaScript错误 #

• 地理定位API调用错误：navigator.getLocation.getCurrentPosition 改为 navigator.geolocation.getCurrentPosition
• 回调函数关键字错误：functional(position) 改为 function(position)
• 模板字符串符号错误：输出定位坐标的行用了单引号包裹插值语法，改为反引号包裹：

  directionsInfo.innerHTML = `You appear to be at: ${position.coords.latitude}, ${position.coords.longitude}`
  

• 路线请求参数名错误：calcRoute函数内的请求参数travelmode改为驼峰写法travelMode
• 状态判断逻辑错误：if(status='OK') 是赋值操作，改为全等判断if(status === 'OK')
• 标记点属性拼写错误：起点marker的lable属性改为label
• 全局变量未声明：initMap函数内的directionsMap前添加let声明变量

所有错误修复完成后，点击获取路线按钮授予定位权限即可正常加载地图和规划路线。

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