zoukankan      html  css  js  c++  java
  • 腾讯地图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,如果没有父级元素包裹会导致信息框内容撑不开窗体,导致内容显示失败。

  • 相关阅读:
    Git/GitHub使用技巧
    《暗时间》第一遍读书心得整理
    学习方法摘要总结
    Py爬虫项目
    2018年6月12日
    狐狸坑蛋糕
    Codeforces 371C Hanburgers
    【别忘咯】 关于运算优先级
    【noip 2009】 乌龟棋 记忆化搜索&动规
    【Openjudge】 算24
  • 原文地址:https://www.cnblogs.com/webh5/p/11624709.html
Copyright © 2011-2022 走看看