腾讯地图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