高德地图增加地点语音提示

最新推荐文章于 2025-04-18 17:55:58 发布

yghandsome

最新推荐文章于 2025-04-18 17:55:58 发布

阅读量990

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/yghandsome/article/details/89402951

版权

本文介绍了如何在高德地图中增加地点的语音提示功能。首先展示了功能实现后的效果图，接着详细讲解了实现这一功能的核心代码部分，最后提供了完整的代码示例，帮助开发者集成到自己的应用中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1、效果图

在这里插入图片描述

2、核心代码

//实例化信息窗体
var title = '郑州龙子湖站牌',
    content = [];
content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：郑州龙子湖博雅广场");
content.push("电话：010-64733333");
//设置语音图标，以及点击事件
content.push("<lable style='cursor:pointer' 'createAudio()'><img src='https://i.loli.net/2019/04/19/5cb93a87a370f.png' style='height:20px;width:15px;'>播放语音</lable>");
var infoWindow = new AMap.InfoWindow({
    isCustom: true,  //使用自定义窗体
    content: createInfoWindow(title, content.join("<br/>")),
    offset: new AMap.Pixel(16, -45)
});

//隐藏创建一个Audio
function createAudio(){
var audio = new Audio("http://www.w3school.com.cn/i/song.ogg");
audio.play();
}

3、完整代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user