<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
html {
height:100%
}
body {
height:100%;
margin:0px;
padding:0px
}
#main {
height:100%
}
#map {
height: 90%
}
.circle-marker {
position: absolute;
width: 90px;
height: 90px;
background: #c00;
border-radius: 50%;
opacity: .7
}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=Ls1zIpQI8SB8bi46cSGieAYLHYeyHzfW"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="main">
<div id="map"></div>
<div><button @click="subway(1)">1 号线</button></div>
</div>
<script>
new Vue({
el: '#main',
mounted() {
var map = new BMap.Map("map", {enableMapClick: false}); // 创建地图实例
var point = new BMap.Point(116.400551, 39.893524); // 创建点坐标
map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom()
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}))
// 画地铁线
var busline = new BMap.BusLineSearch(map,{
renderOptions:{map:map},
onGetBusListComplete: function(result){
if(result) {
var fstLine = result.getBusListItem(0);
busline.getBusLine(fstLine)
}
}
})
function busSearch(bus){
busline.getBusList(bus)
busline.setMarkersSetCallback(function(e) {
for(var i =0; i<e.length; i++) {
map.removeOverlay(e[i])
}
})
}
},
methods: {
subway(num) {
// vue 配合百度地图,怎么给元素绑定事件,添加方法呢?
console.log(num)
}
}
})
</script>
</body>
</html>
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.