高德地图js API实现鼠标悬浮点标记时显示弹窗详情，点击点标记放大地图操作

_格鲁特宝宝

于 2019-03-22 10:36:24 发布

阅读量5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web FrontEnd javascript 文章标签：高德地图高德API js 鼠标悬停显示弹窗

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.youkuaiyun.com/GrootBaby/article/details/88734773

本文介绍了如何利用高德地图JavaScript API，在地图上实现鼠标悬浮到点标记上时显示详细信息的弹窗，并且在点击点标记后放大地图的详细步骤。

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

<!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-scalable=no, width=device-width">
    <title>自定义窗体</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.4.0/cerulean/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=139e66ee00b2edc5c7ad3fd640b60c07"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    //初始化地图对象，加载地图
    var map = new AMap.Map("container", {resizeEnable: true});
    var lnglats = [
        [116.968904, 39.999923],
        [116.382122, 39.921176],
        [116.372122, 39.921176],
        [116.968904