java 腾讯地图api,Class:覆盖物/Marker - 腾讯地图API
JavaScript+HTML
设置marker属性
* {
margin: 0px;
padding: 0px;
}
body,
button,
input,
select,
textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p {
width: 603px;
padding-top: 3px;
margin-top: 10px;
overflow: hidden;
}
.btn {
width: 112px;
}
function init() {
var center = new qq.maps.LatLng(39.982163, 116.306070);
var map = new qq.maps.Map(document.getElementById("container"), {
center: center,
zoom: 16
});
//创建一个Marker
var marker = new qq.maps.Marker({
//设置Marker的位置坐标
position: center,
//设置显示Marker的地图
map: map
});
//设置Marker的可见性,为true时可见,false时不可见,默认属性为true
marker.setVisible(true);
//设置Marker的动画属性为从落下
marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
//设置Marker是否可以被拖拽,为true时可拖拽,false时不可拖拽,默认属性为false
marker.setDraggable(true);
设置Marker自定义图标的属性,size是图标尺寸,该尺寸为显示图标的实际尺寸,origin是切图坐标,该坐标是相对于图片左上角默认为(0,0)的相对像素坐标,anchor是锚点坐标,描述经纬度点对应图标中的位置
var anchor = new qq.maps.Point(0, 39),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
icon = new qq.maps.MarkerImage(
"https://lbs.qq.com/doc/img/nilt.png",
size,
origin,
anchor
);
marker.setIcon(icon);
//设置Marker阴影图片属性,size是图标尺寸,该尺寸为显示图标的实际尺寸,origin是切图坐标,该坐标是相对于图片左上角默认为(0,0)的相对像素坐标,anchor是锚点坐标,描述经纬度点对应图标中的位置
var anchorb = new qq.maps.Point(3, -30),
sizeb = new qq.maps.Size(42, 11),
origin = new qq.maps.Point(0, 0),
iconb = new qq.maps.MarkerImage(
"https://lbs.qq.com/doc/img/nilb.png",
sizeb,
origin,
anchorb
);
marker.setShadow(iconb);
//设置标注的名称,当鼠标划过Marker时显示
marker.setTitle("测试");
//添加信息窗口
var info = new qq.maps.InfoWindow({
map: map
});
//获取标记的可拖动属性
info.open();
info.setContent('标记的可拖动属性为:' + marker.getDraggable());
info.setPosition(marker.getPosition());
//标记Marker点击事件
qq.maps.event.addListener(marker, 'click', function() {
info.open();
info.setContent('
');
info.setPosition(marker.getPosition());
});
//设置Marker停止拖动事件
qq.maps.event.addListener(marker, 'dragend', function() {
info.open();
info.setContent('
');
//getPosition() 返回Marker的位置
info.setPosition(marker.getPosition());
});
}
Marker可以拖动,点击时弹出单击信息窗口,拖动Marker时弹出拖动信息窗口
java 腾讯地图api,Class:覆盖物/Marker - 腾讯地图API相关推荐
- 百度地图API删除指定的覆盖物Marker
部分思路代码: 1.给地图map添加覆盖物Marker,注意给marker设定一个唯一表示,我这里用的是后端传过来的id const point = new BMap.Point(item.lng, ...
- java高德地图api开发平台_【高德地图API】从零开始学高德JS API(一)地图展现...
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合m ...
- vue - vue使用腾讯api进行定位获取,绘制地图、标点、搜索、路线规划
章节目录 1,前言 2,准备 3,开始引入api 4,获取定位 5,绘制地图和标点 6,关键字搜索功能 7,驾车线路规划 8,两点经纬度的直线距离计算 9,使用过程中的一些常见问题 10,参考链接 1 ...
- 高德地图js API实现多点标记marker,多点marker移除和鼠标滑入标点显示提示框
官方API:https://lbs.amap.com/api/javascript-api/guide/abc/prepare 先说下需求吧,我就不往外一段一段的摘了: 分全部和三家运营商,按钮点击, ...
- 浅谈百度地图的简单开发之实现基本地图的类型及覆盖物的添加(二)
今天,我们接着上一讲,上一讲我们把地图上界面自定义了一番,加上了按钮等一系列的控件,但是还没有给这些加上具体的功能,今天这一讲,主要是实现几种地图的切换,是否开启实时交通,通过自定义的按钮去控制地图的 ...
- 如何利用【百度地图API】,制作房产酒店地图?(下)——结合自己的数据库...
摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章-- --------------------------------------------------------- 一.先按照前两篇 ...
- html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版 简介 JavaScript API大众版 JavaScript API功能介绍 百度地图Jav ...
- 百度地图之添加覆盖物
本文主要讲解如何实现在百度地图上添加覆盖物 1.承载数据的实体 我们从服务器返回的数据部分,最终可能是个Json数组,我们需要转换为实体集合,即下面的Info.java 我直接在实体类中声明了一个静态 ...
- html百度地图秘钥,自己网页调用百度地图API 附API密钥
百度地图API自定义地图 地图生成工具基于百度地图JS api v2.0版本开发,使用请申请密匙. 了解如何申请密匙 申请密匙 //创建和初始化地图函数: function initMap(){ cr ...
最新文章
- 什么是java双亲委派机制
- 计算机基础扎实,到底是说什么?
- 学习C++不要纠结了
- 2012 夏季高校微软俱乐部活动 - 开门创新
- 湖南工程学院+c语言程序设计人事档案管理系统,程序设计人事档案管理系统.doc...
- java实验多线程机制_JAVA 多线程机制(一)
- linux jboss 多实例,在单个JBoss实例上设置多个端口?
- 用计算机模仿真实系统的技术叫,计算机模拟技术.pdf
- 用C#写XML类型的配置文件:
- OSSIM安装zabbix
- hash函数的构造方法
- 领域驱动设计思维导图
- 个性时钟屏保=冷高轮时间麻将时钟电脑屏幕保护
- mysql sql 按天分组统计_Mysql按日、周、月进行分组统计
- java guardedby_java并发编程之Guarded Suspention
- 如何用日志记录VSS中的用户修改行为
- iOS 苹果内购详细步骤
- 用计算机解决问题听课笔记,《用计算机解决问题的一般步骤》说课稿
- 《计算机网络》第三章作业
- 全国各IT领军城市软件和服务外包Q群
热门文章
- 解决vue 提交日期格式数据,时间出现时区差的问题
- 生命无常,请别辜负好时光!
- 关于缺氧的房间大小RoomSize修改(自用)
- 消防应急照明和疏散指示系统手动控制的设计与应用
- hadoop一键启动脚本
- 为什么需要Spring? 什么是Spring?带你由浅入深的方式进行介绍,只要你会编程就能看懂
- vscod编辑html,vsco是什么软件?
- MyBatis-Plus - 深入进阶
- COEL空压机变频器维修Z8200A37KN4-YT
- android 刷密码错误,[Android N]关于TWRP在刷机后提示需要输入密码的最终解决方案...