高德地图JS-API开发—Marker添加及infoWindow处理

// 添加 Marker
       function addMarker(jsonData) {
           for (var i = 0; i < jsonData.length; i++) {
               var pointX = jsonData[i].x;
               var pointY = jsonData[i].y;
               var rr = window.rr;
               var point = rangeDis(pointX, pointY, rr)
               if (point == undefined) {
                   continue;
               }

// 测距(定位到商家)
               var icon = jsonData[i].myIcon
               var music = jsonData[i].music
               var title = jsonData[i].title
               var marker = new AMap.Marker({
                   position: point,
                   map: map,
                   icon: icon,
                   label: {
                       offset: new AMap.Pixel(0, 1), //设置文本标注偏移量
                       content: "<div class='info'>" + title + "</div>", //设置文本标注内容
                       direction: 'top' //设置文本标注方位
                   },
                   title: title,
                   price: jsonData[i].price,
                   img: jsonData[i].img,
                   imgvr: jsonData[i].imgvr,
                   address: jsonData[i].address,
                   music: jsonData[i].music,
                   visible: true,
               });

AMap.event.addListener(marker, 'click', function(e) {

                   var clouddata = e.target.B;
                   console.log(clouddata)
                   _location = [clouddata.position.lng, clouddata.position.lat];

document.getElementById("testo").setAttribute("src", clouddata.music);
//实例化信息窗体
var title = clouddata.title,

content = [];

// 景点有音频
                   var infoWindowSpotYes = new AMap.InfoWindow({
                       content: "<div class='tr_title'><div class='tit'>" + clouddata.title + "</div></div>" +
                           "<div class='tr_winImg'><img src=" + clouddata.img + ">" + "</div>" +
                           "<div id=" + clouddata.music +
                           " class='tr_music' οnclick='playMusic(this)'><img οnclick='bf_bt(this)' class='imgss' src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/img/bftb1.png'/></div>" +
                           "<div class='tr_winA'><a id='imgvr' href=" + clouddata.imgvr +
                           "><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win1.png'/></a>" +
                           "<a href='https://uri.amap.com/marker?position=" + clouddata.position.lng + "," + clouddata.position.lat +
                           "&name=" + title +
                           "'><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win2.png'/></a></div>",
                       size: new AMap.Size(0, 0),
                       autoMove: true,
                       closeWhenClickMap: true,
                       offset: new AMap.Pixel(0, -25)
                   });

// 景点无音频
                   var infoWindowSpotNo = new AMap.InfoWindow({
                       content: "<div class='tr_title'><div class='tit'>" + clouddata.title + "</div></div>" +
                           "<div class='tr_winImg'><img src=" + clouddata.img + ">" + "</div>" +
                           "<div class='tr_winA'><a id='imgvr' href=" + clouddata.imgvr +
                           "><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win1.png'/></a>" +
                           "<a href='https://uri.amap.com/marker?position=" + clouddata.position.lng + "," + clouddata.position.lat +
                           "&name=" + title +
                           "'><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win2.png'/></a></div>",
                       size: new AMap.Size(0, 0),
                       autoMove: true,
                       closeWhenClickMap: true,
                       offset: new AMap.Pixel(0, -25)
                   });

// 酒店+美食
                   var infoWindowHF = new AMap.InfoWindow({
                       content: "<div class='tr_title'><div class='tit'>" + clouddata.title + "</div><div class='sp'>价格:" +
                           clouddata.price + "</div></div>" +
                           "<div class='tr_winImg'><img src=" + clouddata.img + ">" + "</div>" +
                           "<div class='tr_winA'><a id='imgvr' href=" + clouddata.imgvr +
                           "><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win1.png'/></a>" +
                           "<a href='https://uri.amap.com/marker?position=" + clouddata.position.lng + "," + clouddata.position.lat +
                           "&name=" + title +
                           "'><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win2.png'/></a></div>",
                       size: new AMap.Size(0, 0),
                       autoMove: true,
                       closeWhenClickMap: true,
                       offset: new AMap.Pixel(0, -25)
                   });

// 厕所停车场
                   var infoWindowWCP = new AMap.InfoWindow({
                       content: "<div class='tr_title'><div class='tit'>" + clouddata.title + "</div><div class='sp'>价格:" +
                           clouddata.price + "</div></div>" +
                           "<div class='tr_winImg'><img src=" + clouddata.img + ">" + "</div>" +
                           "<a class='tr_dha' href='https://uri.amap.com/marker?position=" + clouddata.position.lng + "," + clouddata.position
                           .lat +
                           "&name=" + title +
                           "'><img src='https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/images/win2.png'/></a></div>",
                       size: new AMap.Size(0, 0),
                       autoMove: true,
                       closeWhenClickMap: true,
                       offset: new AMap.Pixel(0, -25)
                   });
                   if (clouddata.icon == "https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/marker/landscape.png") {
                       infoWindowSpotNo.open(map, _location);
                   } else if (clouddata.icon == "https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/marker/landscape_audio.png") {
                       infoWindowSpotYes.open(map, _location);
                   } else if (clouddata.icon == "https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/marker/hotel.png" || clouddata.icon ==
                       "https://vrycf.oss-cn-shenzhen.aliyuncs.com/index/marker/food.png") {
                       infoWindowHF.open(map, _location);
                   } else {
                       infoWindowWCP.open(map, _location);
                   }
               });

}
}

可根据不同marker设计不同信息窗体

高德地图JS-API开发—Marker添加及infoWindow处理相关推荐

1、高德地图JS API开发背景知识
1.1.什么是API? 1.1.1.API API,英文全称Application Programming Interface,翻译为"应用程序编程接口".是一些预先定义的函数,目 ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
高德地图JavaScript API开发研究
高德地图JavaScript API开发研究原文:高德地图JavaScript API开发研究高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种 ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
高德地图JS API 使用01
最近做项目,有个需求使用到高德地图JS API,现写博客总结一下. 需求要求大概是这样的: 使用地图高德或百度或谷歌都可以(这里吐槽一下,百度地图的jsAPI帮助文档写的太...谷歌你懂的...高德目 ...
高德地图js API实现鼠标悬浮于点标记时弹出信息窗体显示详情，点击点标记放大地图操作
高德地图js API实现:鼠标悬浮于点标记时,弹出信息窗体显示详情,点击点标记时放大地图 <!doctype html> <html> <head><meta ...
高德地图JS API之海量点标记十万以内的点
高德地图JS API之海量点标记十万以内的点怎么引入高度地图就不写了,官方是这样说的:当需要在地图展示数量为十万以内的点并且需要较好的性能表现时,可以使用 AMap.MassMarks 类.AMap ...
高德地图 js API Loca 3D动画的使用说明
高德地图 js API Loca 3D动画的使用说明我们在使用 Loca 制作地图动画时,里面有几个对应的动画效果,有 center: 平移 pitch: 视角 zoom: 缩放 rotation: ...
cordova下使用高德地图js api在4g流量下定位失败问题的解决
问题描述 cordova页面中使用高德地图js api AMap.Geolocation的geolocation.getCurrentPosition()方法进行定位用手机4g打开该页面,定位失败, ...
Vue 高德地图 js API Loca 如何使用连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用连接线图层.脉冲连线图层阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式已经了解如何载入 Loca 插件如果不了解,可以查看我之 ...

高德地图JS-API开发—Marker添加及infoWindow处理

高德地图JS-API开发—Marker添加及infoWindow处理相关推荐

最新文章

热门文章