Skip to content

Commit

Permalink
地址
Browse files Browse the repository at this point in the history
  • Loading branch information
@yunchuan10
yunchuan10 committed Jun 26, 2018
1 parent b9de050 commit c553c24
Show file tree
Hide file tree
Showing 3 changed files with 256 additions and 62 deletions.
46 changes: 24 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>vue_gshop</title>
<link rel="stylesheet" href="/static/css/reset.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_518606_6676bmcalnrhehfr.css"></link>
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>vue_gshop</title>
<link rel="stylesheet" href="/static/css/reset.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_518606_6676bmcalnrhehfr.css"></link>
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>

<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=NK0DTEwcPZEyMZQg0ElqvLwVTCp25tfw&callback=init"></script>
</body>
</html>
40 changes: 33 additions & 7 deletions src/pages/Home/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="home-section msite">

<!-- 头部 -->
<comm-head :title="address.name">
<comm-head :title="dress">
<span class="header_search" slot="left">
<i class="iconfont icon-sousuo"></i>
</span>
Expand Down Expand Up @@ -41,7 +41,7 @@
<shopList></shopList>
</div>


<div id="XSDFXPage" class="XSDFXPage"></div>
</div>

</template>
Expand All @@ -60,6 +60,7 @@ export default {
return {
baseImageUrl: 'https://fuss10.elemecdn.com',
swiper: null,
dress: ''
};
},
Expand All @@ -72,10 +73,12 @@ export default {
created() {
this.getCategorys();
},
mounted(){
setTimeout(()=>{
this.setMap();
}, 2000)
},
watch: {
Expand Down Expand Up @@ -118,9 +121,6 @@ export default {
// },
// })
// })
return arr;
}
Expand All @@ -129,6 +129,32 @@ export default {
methods: {
...mapActions(['getCategorys']),
setMap(){
console.log(111)
let {map} = this;
var _this = this;
// 百度地图API功能
map = new BMap.Map("XSDFXPage");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 12);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
// _this.dress = (r.address.city + r.address.district + r.address.street + r.address.street_number);
_this.dress = (r.address.district + r.address.street + r.address.street_number);
console.log(_this.dress)
}
else {
console.log(4444)
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
// this.map = map;
}
},
destroyed(){
document.documentElement.scrollTop=document.body.scrollTop=0
Expand Down
232 changes: 199 additions & 33 deletions src/pages/Search/Search.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
<input type="search" name="search" placeholder="请输入商家或美食名称" class="search_input">
<input type="submit" name="submit" class="search_submit">
</form>


</section>


Expand All @@ -31,44 +33,210 @@ export default {
created() {
},
mounted() {
// 百度地图API功能
// 创建Map实例
// var map = new BMap.Map("XSDFXPage",{enableMapClick:true});
// // 初始化地图,设置中心点坐标和地图级别
// map.centerAndZoom(new BMap.Point(116.4035,39.915), 11);
// // 添加地图类型控件
// map.addControl(new BMap.MapTypeControl());
// // 设置地图显示的城市 此项是必须设置的
// map.setCurrentCity("杭州");
// // 开启鼠标滚轮缩放
// map.enableScrollWheelZoom(true);
// // 设置定时器，对地图进行自动移动
// setTimeout(function(){
// map.panTo(new BMap.Point(113.262232,23.154345));
// }, 2000);
// setTimeout(function(){
// map.setZoom(14);
// },4000);
// /************************************************
// 添加折线
// *************************************************/
// var pointGZ = new BMap.Point(113.262232,23.154345);
// var pointHK = new BMap.Point(110.35,20.02);
// setTimeout(function(){
// var polyline = new BMap.Polyline([pointGZ,pointHK],{strokeColor:"blue",strokeWeight:5,strokeOpacity:0.5});
// map.addOverlay(polyline);
// },6000);
// /************************************************
// 添加工具条、比例尺控件
// *************************************************/
// map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}));
// map.addControl(new BMap.NavigationControl());
// map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL}));
// /************************************************
// 添加自定义控件类，放大ZoomControl
// *************************************************/
// function ZoomControl() {
// //默认停靠位置和偏移量
// this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
// this.defaultOffset = new BMap.Size(50,23);
// }
// //通过JavaScript的prototype属性继承于BMap.Control
// ZoomControl.prototype = new BMap.Control();
// //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
// //在本方法中创建div容器，并将其添加到地图容器中
// ZoomControl.prototype.initialize = function(map) {
// //创建一个DOM元素
// var div = document.createElement('div');
// //添加文字说明
// div.appendChild(document.createTextNode('放大两级'));
// //添加样式
// div.style.color = '#40C5CC';
// div.style.cursor = 'pointer';
// div.style.border = '3px solid gray';
// div.style.backgroundColor = '#eee';
// //绑定事件，点击触发
// div.onclick = function(e) {
// map.setZoom(map.getZoom() + 2);
// }
// //添加DOM元素到地图上
// map.getContainer().appendChild(div);
// //将DOM元素返回
// return div;
// }
// //创建控件
// var myZoomCtrl = new ZoomControl();
// map.addControl(myZoomCtrl)
// /************************************************
// 添加添加城市列表控件
// *************************************************/
// map.addControl(new BMap.CityListControl({
// anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
// offset:new BMap.Size(130,23)
// // 切换城市之间事件
// // onChangeBefore: function(){
// // alert('before');
// // },
// // 切换城市之后事件
// // onChangeAfter:function(){
// // alert('after');
// // }
// }));
// /************************************************
// 添加新图标
// *************************************************/
// //定义新图标
// var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif",new BMap.Size(300,157));
// //创建标注
// var marker = new BMap.Marker(pointHK,{icon:myIcon});
// var marker1 = new BMap.Marker(pointGZ,{icon:myIcon});
// //将标注放大地图上
// map.addOverlay(marker);
// map.addOverlay(marker1);
// //文字提示
// var label = new BMap.Label('广州西站',{offset:new BMap.Size(140,10)});
// marker1.setLabel(label);
// //添加新图标的监听事件
// marker1.addEventListener('click',function(){
// var p = marker1.getPosition();//获取位置
// alert("点击的位置是：" + p.lng + ',' + p.lat);
// })
// /************************************************
// 添加曲线
// *************************************************/
// var beijingPosition=new BMap.Point(116.432045,39.910683),
// hangzhouPosition=new BMap.Point(120.129721,30.314429),
// taiwanPosition=new BMap.Point(121.491121,25.127053);
// var point = [beijingPosition,hangzhouPosition,taiwanPosition];
// var curve = new BMapLib.CurveLine(point, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});//创建弧线
// map.addOverlay(curve);//添加到地图上
// curve.enableEditing();//开启编辑功能
// /************************************************
// 给地图添加右键菜单
// *************************************************/
// var menu = new BMap.ContextMenu();
// var txtMenuItem = [
// {
// text:'放大',
// callback:function(){map.zoomIn()}
// },
// {
// text:'缩小',
// callback:function(){map.zoomOut()}
// }
// ];
// for(var i=0; i < txtMenuItem.length; i++){
// menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
// }
// map.addContextMenu(menu);
},
methods: {
}
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixins.styl"
.search //搜索
width 100%
padding-top 45px
.search_form
clearFix()
background-color #fff
padding 12px 8px
input
height 35px
padding 0 4px
border-radius 2px
font-weight bold
outline none
&.search_input
float left
width 79%
border 4px solid #f2f2f2
font-size 14px
color #333
background-color #f2f2f2
&.search_submit
float right
width 18%
border 4px solid #02a774
font-size 16px
color #fff
background-color #02a774
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "../../common/stylus/mixins.styl"
.search
width 100%
height 100%
overflow hidden
.search_form
clearFix()
margin-top 45px
background-color #fff
padding 12px 8px
input
height 35px
padding 0 4px
border-radius 2px
font-weight bold
outline none
&.search_input
float left
width 79%
border 4px solid #f2f2f2
font-size 14px
color #333
background-color #f2f2f2
&.search_submit
float right
width 18%
border 4px solid #02a774
font-size 16px
color #fff
background-color #02a774
.list
.list_container
background-color: #fff;
.list_li
display: flex;
justify-content: center;
padding: 10px
border-bottom: 1px solid $bc;
.item_left
margin-right: 10px
.restaurant_img
width 50px
height 50px
display block
.item_right
font-size 12px
flex 1
.item_right_text
p
line-height 12px
margin-bottom 6px
&:last-child
margin-bottom 0
.search_none
margin: 0 auto
color: #333
background-color: #fff
text-align: center
margin-top: 0.125rem
</style>


Expand All @@ -79,5 +247,3 @@ export default {





0 comments on commit c553c24

Please sign in to comment.