1.点击marker弹出对话框
maptalks的网址上有弹出信息框的例子,复制如下:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>空间与UI组件 - 图形信息框</title>
<style type="text/css">
html,body{margin:0px;height:100%;width:100%}
.container{width:100%;height:100%}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks@0.36.2/dist/maptalks.min.js"></script>
<body>
<div id="map" class="container"></div>
<script>
var map = new maptalks.Map('map', {
center: [-0.113049,51.49856],
zoom: 14,
attribution: {
content: '© Google Maps'
},
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2sen-US!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965',
subdomains: ['a','b','c','d']
})
});
var layer = new maptalks.VectorLayer('vector').addTo(map);
var marker = new maptalks.Marker([-0.113049,51.49856]).addTo(layer);
marker.setInfoWindow({
'title' : 'Marker\'s InfoWindow',
'content' : 'Click on marker to open.'
// 'autoPan': true,
// 'width': 300,
// 'minHeight': 120,
// 'custom': false,
//'autoOpenOn' : 'click', //set to null if not to open when clicking on marker
//'autoCloseOn' : 'click'
});
marker.openInfoWindow();
</script>
</body>
</html>
但是我放到自己工程里却发现报错,提示Uncaught TypeError: Cannot read property 'appendChild' of undefined之后检查了一下,发现例子里的map用的容器是div,而我用的是canvas。之后换成div了之后就解决了~~~当时用canvas的原因在于,不知道为何,容器是div的时候,导出为图片( map.toDataURL)功能,导出的图片是透明的。所以才换成了canvas.....现在这个问题也还没找到解决办法。