html地图添加marker,腾讯地图添加多marker标注样式

腾讯地图添加多marker样式

html,

body {

height: 100%;

margin: 0px;

padding: 0px;

}

#container {

800px;

height: 800px;

}

function init() {

var center = new qq.maps.LatLng(39.916527, 116.397128);

var map = new qq.maps.Map(document.getElementById("container"), {

center: center,

zoom: 13

});

var infoWin = new qq.maps.InfoWindow({

map: map

});

var latlngs = [

new qq.maps.LatLng(39.91374, 116.37333),

new qq.maps.LatLng(39.91347, 116.39336),

new qq.maps.LatLng(39.90184, 116.41306)

];

//根据图片大小调整界点

var anchor = new qq.maps.Point(0, 39),

size = new qq.maps.Size(42, 68),

origin = new qq.maps.Point(0, 0),

markerIcon = new qq.maps.MarkerImage(

"http://xxx.xxxxxxxxxx.com/style/image/img31.png",

// size,

// origin,

// anchor

);

for (var i = 0; i < latlngs.length; i++) {

(function (n) {

//实例标注

var marker = new qq.maps.Marker({

position: latlngs[n],

map: map

});

//设置每个标注的样式

marker.setIcon(markerIcon);

//标注点击事件

qq.maps.event.addListener(marker, 'click', function () {

infoWin.open();

infoWin.setContent('

这是第 ' +

n + ' 个标注

');

infoWin.setPosition(latlngs[n]);

});

})(i);

}

init();

html地图添加marker,腾讯地图添加多marker标注样式相关推荐

java百度地图坐标_java腾讯地图与百度地图坐标转换
/** * 坐标转换,腾讯地图转换成百度地图坐标 * @param lat 腾讯纬度 * @param lon 腾讯经度 * @return 返回结果:经度,纬度 */ public String m ...
百度地图经纬度转换腾讯地图经纬度
百度地图经纬度转腾讯地图经纬度 function bMapTransQQMap(lng,lat){ let x_pi = 3.14159265358979324 * 3000.0 / ...
小程序地图标点,h5腾讯地图标点,vue使用腾讯地图,腾讯地图自定义图标
很多项目都用到了腾讯地图,不管是小程序还是h5,记录一下使用过程! 1.先到腾讯地图官网点击注册注册登陆准备工作先到腾讯地图官网点击注册注册登陆进入控制台申请key,根据自己的实际情况选择key ...
微信小程序map 地图引入配置+腾讯地图地址坐标解析
最终效果一.要实现的功能展示地图. 参考map组件在地图上展示多个店铺. marker标记点用于在地图上显示标记的位置. 点击店铺放大图标,展示选择的店铺信息. 更改选择店铺的标记尺寸大小. 在 ...
腾讯地图html代码,腾讯地图API使用参考.html
Hello world! #container { /*地图(容器)显示大小*/ width: 1200px; height: 400px; } //地图初始化函数,本例取名为init,开发者可根据实 ...
腾讯地图android,手机腾讯地图
手机腾讯地图使用帮助 - 安装 1.安装手机腾讯地图软件需要占用多大的存储空间?最好安装在手机上还是安装在存储卡上? 程序安装包会占用大约3MB的存储空间:手机腾讯地图单个城市的数据包大小平均在3M左 ...
微信小程序 - 接入腾讯地图 SDK 及详细使用教程，结合小程序 mpa 地图组件展示腾讯地图（基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆地址解析 / 坐标系的转化）
介绍网上的教程都太乱了,代码根本没办法拿到自己的项目中去. 本文实现了微信小程序中接入使用腾讯地图插件详细教程,并提供了基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆 ...
java 腾讯地图api,Class:覆盖物/Marker - 腾讯地图API
JavaScript+HTML 设置marker属性 * { margin: 0px; padding: 0px; } body, button, input, select, textarea { ...
微信小程序地图篇（腾讯地图）
Welcome! 边学边记,完后整理.欢迎阅读. 文章目录 Welcome! 一.获取当前位置二.拖动地图动态获取数据三.动态显示视图中心附近的用户信息一.获取当前位置 # map.wxml & ...

html地图添加marker,腾讯地图添加多marker标注样式

html地图添加marker,腾讯地图添加多marker标注样式相关推荐

最新文章

热门文章