腾讯地图marker中大小的控制和事件绑定。

腾讯地图SDK地址:    点击进入

在示例中 My location中需要加入按钮并绑定事件。

var container = document.getElementById("container");
var center = new TMap.LatLng(39.984104,116.307503);//设置中心点坐标
//初始化地图
var map = new TMap.Map(container, {
    center: center
});

//初始marker
var marker = new TMap.MultiMarker({
    id: ‘marker-layer‘,
    map: map,
    styles: {
        "marker": new TMap.MarkerStyle({
            "width": 23,
            "height": 35,
            "anchor": { x: 12, y: 32 },
            "src": ‘../img/marker.png‘
        })
    },
    geometries: [{
        "id": ‘demo1‘,
        "styleId": ‘marker‘,
        "position": new TMap.LatLng(39.984104,116.307503),
        "properties": {
            "title": "marker"
        }
    }, {
        "id": ‘demo2‘,
        "styleId": ‘marker‘,
        "position": new TMap.LatLng(39.974104,116.347503),
        "properties": {
            "title": "marker"
        },

    }]
});
//初始化infoWindow
var infoWindow = new TMap.InfoWindow({
    map: map,
    position: new TMap.LatLng(39.984104,116.307503),
    offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素,为了使其显示在Marker的上方
});
infoWindow.close();//初始关闭信息窗关闭
//监听标注点击事件
marker.on("click", function (evt) {
    //设置infoWindow
    infoWindow.open(); //打开信息窗
    infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
    infoWindow.setContent(evt.geometry.position.toString());//设置信息窗内容

})

PS:

1. 在marker.on的方法中直接为信息窗口添加事件会导致添加不上,需要加入500ms的演示定时器才能为信息窗体中的按钮绑定事件。

2.在setContent中插入元素时需要为所有的子元素添加一个父级的DIV,如果没有父级元素包裹会导致信息框内容撑不开窗体,导致内容显示失败。

原文地址:https://www.cnblogs.com/webh5/p/11624709.html

时间: 2024-10-13 04:05:01

腾讯地图marker中大小的控制和事件绑定。的相关文章

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定

一.DI-控制器参数 $scope - 在js和html之间传递数据 - 仅在控制器作用域内有效 $element - 是一个jQuery对象 - 作用域控制器所在的html元素 - 在js中,通过$element获取DOM对象 - var e = $element.children().eq(0); - $scope.w = e.width(); - $scope.h = e.height(); $http - http协议请求 - $http.get(url).success(functio

HTML中动态生成内容的事件绑定问题【转载】

转自 http://www.hitoy.org/event-binding-problem-of-dynamically-generated-content.html 由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中插入内容,有两种方法,一种是在写HTML代码写入JS,然后插入到文档中:另外一种是通过ajax的方式,从服务器获取数据,然后用js把获取的数据经过处理后插入文档中:两种方法各有特点,本文将分析新

DICOM:再次剖析fo-dicom中DicomService的自己定义事件绑定

题记: 趁着<从0到1>大火的热潮,最近又一次翻阅了一遍<从一到无穷大>(这样是不是感觉整个非负数轴就圆满了^_^). 尽管作为科普类书籍.可是里面的内容还是比較深奥,幸亏有作者精准的翻译,一番细细品味后宛如醍醐灌顶,心中透亮. 一直幻想有外星人.宇宙外生物的存在,从<源代码>描写叙述的"平行世界",到<星际穿越>的"超维空间",再到时下泛滥的穿越剧,却总未解开心中那团疑惑. 也许仅仅有时间的流逝才干给我解答,仅仅怕光

javascript中通过匿名函数进行事件绑定

事件绑定,匿名函数中获取当前元素对象直接this.属性

angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)

angular js 中模板的使用,事件绑定以及指令与指令之间的交互 对应教学视频地址(需翻墙):angularjs教学视频 <!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="ShieldController"> <div&g

笔记-[6]-js中事件绑定方法的总结

js中的两种对象事件绑定方法: 1:常用的如:div.onclick=function(){...}; 2:通过系统方法绑定事件: 非IE:addEventListener('事件名[不加on]',function(){},false[或者true]) IE:attachEvent('事件名[加on]',function(){}); 通过系统方法绑定事件可以让对象可以绑定相同的事件并且执行不同的操作,如果使用第一种方法绑定多个相同的事件,最后一个事件会覆盖前面所有的事件. 在addEventLi

winform中,如何控制控件位置随窗体的大小改变而改变

winform中,如何控制控件位置随窗体的大小改变而改变 有如下3种方法: 方法1 [csharp] view plaincopy using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace MarkPrint

Xamarin.Forms 调用 腾讯地图SDK

Xamarin.Forms研究了好一段时间了,最近一直在学习中,想尝试一下调用其他的SDK,就如腾讯地图SDK(申请容易). 完成此次项目得感谢以下链接: http://www.cnblogs.com/jtang/p/4698496.html 其他文档参考: 腾讯地图SDK(安卓)文档 这里面有详细的使用过程(当然里面的代码是不适用C#的,不过要从这里下载SDK,也有如何申请Key的过程,请参考阅读) Xamarin.Forms自定义每个平台的控件文档 里面有如何根据不同的平台条件下,调用其他页

腾讯地图API简介、整理

目录 腾讯地图API 1 1.API概览... 1 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 1 1.2 URL API:... 2 1.3 静态图API:... 2 1.3 JavaScript API V2:... 2 1.4 另外还有Android SDK, Android 定位SDK,和IOS SDK,主要用于手机端开发.     2 2. 下面重点讲解JavaScript API V2:... 2 2.1最简单的地图-显示一张以坐标为中心