sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577
							<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
</head>
<style type="text/css">
body {
    background-color: #ffffff;
}
</style>
<body>

</body>
<script type="text/javascript" src="../../../script/api.js" ></script>
<script type="text/javascript">
	var winHeight,
		map,
		lat='39.989539',
		lon='116.384767';
    apiready = function(){
    	winHeight = api.pageParam.height;
        api.parseTapmode();
        map = api.require('bMap');
        getLocation();
        open();
    };
    //打开地图
    function open(){
		map.open({
		    rect: {
		        x: 0,
		        y: winHeight,
		        w: 'auto',
		        h: api.frameHeight
		    },
		    center: {
		        lon: lon,
		        lat: lat
		    },
		    zoomLevel: 15,
		    showUserLocation: true,
		    fixedOn: '',
		    fixed: true
		}, function(ret){

		});
    }
    //关闭
    function close(){
    	map.close();
    }
    //显示
    function show(){
    	map.show();
    }
    //隐藏
    function hide(){
    	map.hide();
    }
    //初始化
    function restart(){
    	api.toast({
		    msg: '请稍候',
		    duration:1500,
		    location: 'top'
		});
		setTimeout(function(){
			close();
			open();
		},1000)

    }
    //获取坐标
    function getLocation(){
    	map.getLocation({
		    accuracy: '100m',
		    autoStop: true,
		    filter: 1
		}, function(ret, err){
		    if(ret.status){
		    	lat = ret.lat;
		        lon = ret.lon;
		        alert(JSON.stringify(ret));
		    }else{
		        alert(err.code);
		    }
		});
    }
    //根据地址查找坐标
    function getCoordsFromName(){
    	api.showProgress({
		    style: 'default',
		    animationType: 'fade',
		    title: '定位中...',
		    text: '请稍候...',
		    modal: false
		});
    	map.getCoordsFromName({
		    city: '北京',
		    address: '天安门'
		},function(ret,err){
			api.hideProgress();
		    if(ret.status){
		       alert(JSON.stringify(ret));
		    }
		});
    }
    /*
    *根据坐标查找地址
    *获取我的坐标地址
    */
    function getNameFromCoords(){
    	api.showProgress({
		    style: 'default',
		    animationType: 'fade',
		    title: '定位中...',
		    text: '请稍候...',
		    modal: false
		});
    	map.getNameFromCoords({
		    lon: lon,
		    lat: lat
		},function(ret,err){
			api.hideProgress();
		    if(ret.status){
		        alert(JSON.stringify(ret));
		    }
		});
    }
    /*
    *两点距离
    */
    function getDistance(){
    	api.showProgress({
		    style: 'default',
		    animationType: 'fade',
		    title: '定位中...',
		    text: '请稍候...',
		    modal: false
		});
    	map.getDistance({
		    start: {
		        lon: lon,
		        lat: lat
		    },
		    end: {
		        lat: 39.915174,
		        lon: 116.403901
		    }
		},function(ret){
			api.hideProgress();
		    if(ret.status){
		        alert("距离天安门约："+ret.distance+"米");
		    }

		});
    }
    /*
    *setCenter
    *设置地图中心点
    */
    function setCenter(){
    	api.toast({
		    msg: '定位中',
		    duration:1500,
		    location: 'top'
		});
    	map.setCenter({
		    coords: {
		        lon: lon,
		        lat: lat
		    },
		    animation:false
		});
    }
    /*
    *showUserLocation
	*显示用户位置
    */
    function showUserLocation(){
    	api.toast({
		    msg: '定位中',
		    duration:1500,
		    location: 'top'
		});
    	map.showUserLocation({
		    isShow: true,
		    trackingMode: 'none'
		});
		//缩放一下
		setZoomLevel();
    }
    /*
    *setZoomLevel
    *设置缩放等级
    */
    function setZoomLevel(){
    	map.setZoomLevel({
		    level: 18
		});
    }
    /*
    *setRotation
    *设置旋转角度
    */
    function setRotation(){
    	map.setRotation({
		    degree: 90
		});
    }
    /*
    *setOverlook
    *设置俯视角度
    */
    function setOverlook(){
		map.setOverlook({
		    degree: -30
		});
    }
    /*
    *setScaleBar
    *比例尺
    */
    function setScaleBar(){
    	map.setScaleBar({
		    show: true,
		    position: {
		      x:0,
		      y:0
		    }
		});
    }
    /*
    *setCompass
    *指南针位置
    */
    function setCompass(){
    	map.setCompass({
		    position: {
		      x:50,
		      y:50
		    }
		});
    }
    /*
    *setTraffic
    *交通路况
    */
    function setTraffic(){
    	map.setTraffic({
		    traffic: true
		});
    }
    /*
    *setHeatMap
    *设置当前城市为热力图
    */
    function setHeatMap(){
    	map.setHeatMap({
		    heatMap: true
		});
		map.setZoomLevel({
		    level: 13
		});
    }
    /*
    *setBuilding
    *是否显示3d
    */
    function setBuilding(){
    	map.setBuilding({
		    building: true
		});
		alert('设置成功，放大地图查看效果');
    }
    /*
    *setRegion
    *设置地图显示范围（矩形区域）
    */
    function setRegion(){
    	map.setRegion({
		    lbLon: 116.027143,
		    lbLat: 39.772348,
		    rtLon: 116.832025,
		    rtLat: 40.126349,
		    animation: true
		});
    }
    /*
    *transCoords
    *坐标转换
    */
    function transCoords(){
    	alert('注意该方法需要重写加入mcode');
    	map.transCoords({
		    type: "common",
		    lon: 116.351,
		    lat: 39.283,
		    mcode: '0B:13:25:D7:85:46:0A:67:12:F3:29:88:64:56:63:10:7A:9C:C4:59;com.apicloud.A6985734480360'
		}, function(ret, err){
		    alert(JSON.stringify(ret));
		});
    }
    /*
    *addEventListener
    *监听事件
    */
    function addEventListener(){
    	alert("将会监听地图双击事件,请双击地图");
    	map.addEventListener({
		    name: 'dbclick'
		},function(ret){
		    if(ret.status){
		        alert(JSON.stringify(ret));
		    }
		});
    }
    /*
    *停止监听
    */
    function removeEventListener(){
    	map.removeEventListener({
		    name: 'dbclick'
		});
		alert("已取消监听双击事件");
    }
    /*
    *addAnnotations
    *添加标注信息
    */
    function addAnnotations(){
    	alert("该方法封装了标注点击弹出气泡");
    	map.addAnnotations({
		    annotations: [{
		        id: 1, lon: 116.297, lat: 40.109
		    },
		    {
		        id: 2, lon: 116.29, lat: 40.109
		    },
		    {
		        id: 3, lon: 116.298, lat: 40.11
		    }],
		    icon: 'widget://image/mark.png',
		    draggable: true
		}, function(ret){
		    if(ret){

		    	//设置点击标注时弹出的气泡信息
		        map.setBubble({
				    id: ret.id,
				    bgImg: 'widget://image/mapbg.png',
				    content: {
				        title: '标注'+ret.id,
				        subTitle: '这是第'+ret.id+'个标注',
				        illus: 'widget://image/liulangnan2.jpg'
				    },
				    styles: {
				        titleColor: '#009900',
				        titleSize: 14,
				        subTitleColor: '#999',
				        subTitleSize: 12,
				        illusAlign: 'left'
				    }
				}, function(ret){
				    if(ret){
				        alert(JSON.stringify(ret));
				    }
				});
		    }
		});
    	map.setCenter({
		    coords: {
		        lon: 116.297,
		        lat: 40.109
		    },
		    animation:false
		});
    }
    /*
	*addBillboard
	*添加布告牌
    */
    function addBillboard(){
    	//设置下中心点
    	setCenter();
		map.addBillboard({
		    id: 4,
		    coords: {
		        lon: lon,
		        lat: lat
		    },
		    bgImg: 'widget://image/mapbg2.png',
		    content: {
		        title: '大标题大标题大标题大标题',
		        subTitle: '概述内容概述内容概述内容',
		        illus: 'widget://image/liulangnan2.jpg'
		    },
		    styles: {
		        titleColor: '#009900',
		        titleSize: 14,
		        subTitleColor: '#999',
		        subTitleSize: 12,
		        illusAlign: 'left'
		    }
		}, function(ret){
		    if(ret){
		        alert(JSON.stringify(ret));
		    }
		});
    }

    /*
    *searchRoute
    *搜索路线方案
    */
    function searchRoute(){
    	api.showProgress({
		    style: 'default',
		    animationType: 'fade',
		    title: '搜索中...',
		    text: '请稍候...',
		    modal: false
		});
    	map.searchRoute({
		    id: 1,
		    type: 'drive',
		    policy: 'ecar_fee_first',
		    start: {
		        lon: 116.403838,
		        lat: 39.914437
		    },
		    end: {
		        lon: 116.384852,
		        lat: 39.989576
		    }
		}, function(ret, err){
		    if(ret.status){
		        api.alert({msg:JSON.stringify(ret)});
		        drawRoute(1);
		    }
		    api.hideProgress();
		});

    }
    /*
    *绘制路线（安卓）
    */
    function drawRoute(id){
    	map.searchRoute({
		    type: 'drive',
		    policy: 'ecar_fee_first',
		    start: {
		        lon: 116.403838,
		        lat: 39.914437
		    },
		    end: {
		        lon: 116.384852,
		        lat: 39.989576
		    }
		}, function(ret, err){
		    if(ret.status){
		        map.drawRoute({
		            id: id,
		            index: 0,
		            styles: {
		                start: {
		                    icon: 'widget://image/mark_start.png'
		                },
		                end: {
		                    icon: 'widget://image/mark_end.png'
		                }
		            }
		        }, function(ret){
		           api.alert({msg:JSON.stringify(ret)});
		        });
		    } else {
		       api.alert({msg:JSON.stringify(err)});
		    }
		});
    }
    /*移除指定的路线*/
    function removeRoute(){
    	map.removeRoute({
		    ids: [1]
		});
    }
    /*
    *searchInCity
    *根据单个关键字搜索兴趣点
    */
    function searchInCity(){
    	api.showProgress({
		    style: 'default',
		    animationType: 'fade',
		    title: '搜索中...',
		    text: '请稍候...',
		    modal: false
		});
    	map.searchInCity({
		    city: '北京',
		    keyword: '学校',
		    pageIndex: 0,
		    pageCapacity: 20
		},function(ret){
			api.hideProgress();
		    if(ret.status){

		       	alert(JSON.stringify(ret.results));
		       	var results = ret.results;
		       	for(var i in results){
			       	map.addAnnotations({
					    annotations: [{
					        id: results[i].uid,
					        lon: results[i].lon,
					        lat: results[i].lat
					    }],
					    icon: 'widget://image/mark.png',
					    draggable: true
					}, function(ret){
					    if(ret){

					    }
					});
			    }

			    map.setCenter({
				    coords: {
				        lon: results[1].lon,
				        lat: results[1].lat
				    },
				    animation:false
				});

		    }else{
		        alert(JSON.stringify(err));
		    }
		});
    }
    /*
    *searchNearby
    *圆形区域内搜索兴趣点
    */
    function searchNearby(){
    	map.searchNearby({
		    keyword: 'KTV',
		    lon: 116.384767,
		    lat: 39.989539,
		    radius: 2000
		},function(ret,err){
		    if(ret.status){
		        alert(JSON.stringify(ret));
		    }else{
		        alert(JSON.stringify(err));
		    }
		});
    }
    /*
	*autocomplete
	*根据关键字返回建议搜索关键字
    */
    function autocomplete(){
    	map.autocomplete({
		    keyword: '北京西站',
		    city: '北京'
		},function(ret){
		    if(ret.status){
		        alert(JSON.stringify(ret.results));
		    }else{
		        alert(JSON.stringify(err));
		    }
		});
    }
</script>
</html>