<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>北京各区电影院</title>
<style>
body,
html,
select,
#container {
width: 90%;
height: 90%;
margin: 20px;
font-family: "微软雅黑";
}
</style>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&type=webgl&ak=e6YlanehTiTAcQll18D6e4bXIfxRg3y6"></script>
</head>
<body>
<div id="container"></div>
<div id="app">
<select v-model="district" @change="setCenter(district)">
<option value="请选择行政区域">请选择行政区域</option>
<option value="西城区">西城区</option>
<option value="东城区">东城区</option>
<option value="海淀区">海淀区</option>
<option value="朝阳区">朝阳区</option>
<option value="丰台区">丰台区</option>
<option value="通州区">通州区</option>
<option value="石景山区">石景山区</option>
<option value="大兴区">大兴区</option>
<option value="顺义区">顺义区</option>
<option value="昌平区">昌平区</option>
<option value="房山区">房山区</option>
<option value="门头沟区">门头沟区</option>
<option value="怀柔区">怀柔区</option>
<option value="平谷区">平谷区</option>
<option value="密云区">密云区</option>
<option value="延庆区">延庆区</option>
</select>
</div>
</body>
<script>
var map = new BMapGL.Map("container");
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom(true);
var local = new BMapGL.LocalSearch(map,
{ renderOptions:{map: map, autoViewport: true}});
new Vue({
el: '#app',
data:{
district:'请选择行政区域'
},
methods:{
setCenter(district){
local.searchNearby("电影院", district);
}
}
});
</script>
</html>
完成了一个小功能，很开心，记录下~