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,如果没有父级元素包裹会导致信息框内容撑不开窗体,导致内容显示失败。

  • 相关阅读:
    CSS
    HTML
    MySQL:PyMySQL&ORM
    MySQL:SQL进阶
    03-body标签中相关标签
    02-body标签中相关标签
    01-html介绍和head标签
    并发编程
    异常处理、网络编程
    面向对象进阶和模块
  • 原文地址:https://www.cnblogs.com/webh5/p/11624709.html
Copyright © 2011-2022 走看看