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

高德地图js API实现：鼠标悬浮于点标记时，弹出信息窗体显示详情，点击点标记时放大地图

<!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 href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><script src="//cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><script type="text/javascript"src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script><!-- 下一行是左边的放大缩小移动操作台 --><script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></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, 39.900001],[117.418258, 39.914600]];var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});for (var i = 0, marker; i < lnglats.length; i++) {var marker = new AMap.Marker({position: lnglats[i],map: map});marker.content = '<h3>我是第' + (i + 1) + '个XXX</h3>';marker.content += '<div>经度：'+lnglats[i][0]+'</div>';marker.content += '<div>纬度：'+lnglats[i][1]+'</div>';marker.content += '<div><button  class="btn btn-suucess btn-xs">历史轨迹</button>';marker.content += '&nbsp;<button class="btn btn-warning btn-xs">实时跟踪&nbsp;</button>';marker.content += '&nbsp;<button  class="btn btn-danger btn-xs">设置</button></div>';marker.on('mouseover', infoOpen);//注释后打开地图时默认关闭信息窗体//marker.emit('mouseover', {target: marker});marker.on('mouseout', infoClose);marker.on('click', newMAp);}  //鼠标点击事件,设置地图中心点及放大显示级别function newMAp(e) {//map.setCenter(e.target.getPosition());map.setZoomAndCenter(15, e.target.getPosition());var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});infoWindow.setContent(e.target.content);infoWindow.open(map, e.target.getPosition()); }function infoClose(e) {infoWindow.close(map, e.target.getPosition());}function infoOpen(e) {infoWindow.setContent(e.target.content);infoWindow.open(map, e.target.getPosition());}map.setFitView();
</script>
</body>
</html>

高德地图js API实现鼠标悬浮于点标记时弹出信息窗体显示详情，点击点标记放大地图操作相关推荐

高德地图JS API 使用01
最近做项目,有个需求使用到高德地图JS API,现写博客总结一下. 需求要求大概是这样的: 使用地图高德或百度或谷歌都可以(这里吐槽一下,百度地图的jsAPI帮助文档写的太...谷歌你懂的...高德目 ...
cordova下使用高德地图js api在4g流量下定位失败问题的解决
问题描述 cordova页面中使用高德地图js api AMap.Geolocation的geolocation.getCurrentPosition()方法进行定位用手机4g打开该页面,定位失败, ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
高德地图JS API之海量点标记十万以内的点
高德地图JS API之海量点标记十万以内的点怎么引入高度地图就不写了,官方是这样说的:当需要在地图展示数量为十万以内的点并且需要较好的性能表现时,可以使用 AMap.MassMarks 类.AMap ...
高德地图 js API Loca 3D动画的使用说明
高德地图 js API Loca 3D动画的使用说明我们在使用 Loca 制作地图动画时,里面有几个对应的动画效果,有 center: 平移 pitch: 视角 zoom: 缩放 rotation: ...
Vue 高德地图 js API Loca 如何使用连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用连接线图层.脉冲连线图层阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式已经了解如何载入 Loca 插件如果不了解,可以查看我之 ...
js 调用android定位,基于html5+ 高德地图JS API使用安卓定位sdk用来进行定位
使用Native.js打开Android的H5辅助定位 mui.plusReady(function() { if(plus.os.name == 'Android') { var AMapLocat ...
vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)
vue-aMap高德地图的应用(添加覆盖物点坐标.自定义图标.添加信息窗体信息等) 最近在项目开发中用到了aMap高德地图,简单记录一下,话不多说,直接上代码. 官方文档参考:高德地图aMap官方文档 ...

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

高德地图js API实现鼠标悬浮于点标记时弹出信息窗体显示详情，点击点标记放大地图操作相关推荐

最新文章

热门文章