Google Maps拖拽主可拖拽标记时，现有标记无故出现蓝色边框问题

出现的蓝色轮廓不属于Google Maps的内置交互样式，是浏览器为获得焦点的DOM元素渲染的默认外轮廓，触发逻辑完全匹配观测结果：

• 为地图标记绑定click事件时，Google Maps会自动给该标记对应的DOM节点设置可聚焦属性（tabindex），允许节点接收页面焦点。
• 拖拽主标记的过程中，鼠标释放或拖拽路径经过标记区域时，浏览器会自动将焦点转移到符合聚焦条件的DOM元素上，触发默认的蓝色轮廓效果。
  注释click处理函数内部的自定义逻辑问题仍然复现，说明异常和处理函数内部的业务逻辑无关：仅绑定click监听这个动作本身，就会让标记的DOM节点具备可聚焦能力。
  Chrome、Safari下均可复现的表现，也符合主流浏览器对可聚焦元素的统一默认渲染规则。

两种方案任选其一即可解决问题：

方案1：通过CSS移除标记的默认焦点轮廓 #

为代码中自定义的标记样式类添加outline: none规则，覆盖浏览器默认渲染效果：

.markerdesign, .markerdesignhover {
  /* 保留原有自定义样式 */
  outline: none !important;
}

方案2：禁用标记的自动聚焦能力 #

初始化MarkerWithLabel时新增tabIndex: -1配置，让标记对应的DOM节点不参与页面自动焦点转移，从根源避免被意外聚焦。
修改标记初始化代码：

var marker = new MarkerWithLabel({
  map : map,
  position : results[0].geometry.location,
  icon : {
    url : 'pin.png',
    scaledSize : new google.maps.Size(40, 30),
  },
  clickable: true,
  tabIndex: -1, // 新增配置
  labelContent : '£' + i.price.toFixed(2),
  labelAnchor : new google.maps.Point(30, 35),
  labelClass : "markerdesign",
  labelInBackground : false,
  title : i.name
});

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