精华内容
下载资源
问答
  • 最近遇到定位问题,借助百度地图ApI与若干文章解决了这个问题。 相对来说,百度地图API中的示例组合起来就能达到大众的需求了,只是刚接触不知道整体是什么情况,花了点时间了解。 ——————————————...

    最近遇到定位问题,借助百度地图ApI与若干文章解决了这个问题。

    相对来说,百度地图API中的示例组合起来就能达到大众的需求了,只是刚接触不知道整体是什么情况,花了点时间了解。

    ————————————————————————————————————————————————————————————

    第一步,注册账号,在百度地图中申请一个应用,如果不是商用要求特别高,一般的就可以,免费。

    注意点,创建时注意应用类型,AK是密钥一样的作用,后面要需要。

    第二、将服务引用到Web 中

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  //为了移动端更好的触屏展示效果
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
    //v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    //v1.4版本及以前版本的引用方式:src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
    </script>
    第三、js绑定地div

            html   <div id="allmap" style="height: 100%; width: 100%; height: 280px;"></div>
            js        
            var  map = new BMap.Map("allmap");
            var point = new BMap.Point(116.331398, 39.897445);
            map.centerAndZoom(point, 12);//默认初始化地图定位的中心经纬度
    
            map.enableScrollWheelZoom(); //启用滚轮放大缩小
            map.enableInertialDragging(); //启用地图惯性拖拽,默认禁用。
            map.enableContinuousZoom();
            var myCity = new BMap.LocalCity();
         
            myCity.get(myFun);
           function myFun(result) {
            var cityName = result.name;
            map.setCenter(cityName);//地图根据城市名称会重新自动定位
            $("#lbcCity").text(cityName);//前台显示当前定位的城市名称
    
         }
    
            为了提供手动选择地址,我使用了jquery的selectcity.js,通过省市二级联动后重新定位
            获取联动后的城市名,在js中用这句话重新定位。
            map.centerAndZoom(city, 11)
            结合bootstrap的css实现移动端效果图
    
    这篇写的比较简洁,因为官方的文档很详细了,个人只是用来记录下,没有写的太详细,见谅!

    展开全文
  • 自动定位城市

    2018-01-16 15:35:00
    像美团等网站打开的时候,都会自动跳转到我们访问者当前所在的城市,这样极大的提高了用户体验度,我们如何实现这一功能呢?其实百度API里面有这个接口插件,根据用户的IP返回出用户所在的城市名。 以下是我整理...

    像美团等网站打开的时候,都会自动跳转到我们访问者当前所在的城市,这样极大的提高了用户体验度,我们如何实现这一功能呢?其实百度API里面有这个接口插件,根据用户的IP返回出用户所在的城市名。

     

    以下是我整理出来的完整范例,手机、pc端测试都可以正常获取出城市名,大家可以参考一下:

     

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>自动获取定位访问者当前城市</title>

    <!--不可省略-->

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

    <!--不可省略-->

    </head>

     

    <body>

    <!--不可省略-->

    <div id="bdMapBox" style="display:none;"></div>

    <script type="text/javascript">

    // 百度地图API功能

    var map = new BMap.Map("bdMapBox");

    var nowCity = new BMap.LocalCity();

    nowCity.get(bdGetPosition);

    function bdGetPosition(result){

    var cityName = result.name;         //当前的城市名

    /*自定义代码*/

    atCity.innerHTML = cityName;

    /*自定义代码*/

    }

    </script>

    <!--不可省略-->

    <p>您当前所在的城市为:<span id="atCity"></span></p>

    </body>

    </html>

     

    运行效果:

     

    自动获取定位访问者当前城市

     

    说明一下:<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 没有密匙可能会在页面运行的时候弹出提示警告,为了让用户有更好的体验度,可以到百度地图开放平台 http://lbsyun.baidu.com/apiconsole/key 创建一个应用,就会得到一个密匙,填到这里就好了。

    此文章转载于:http://www.daixiaorui.com/read/133.html,转载请注明是转载于http://www.daixiaorui.com/read/133.html网址

    转载于:https://www.cnblogs.com/hezhilong/p/8296941.html

    展开全文
  • JavaScript实时全国天气 ,自动定位城市, 采用百度api定位 新浪天气接口获取当前城市天气 项目地址参考github地址:项目示例js代码片段//获取位置 function getLocation(){ if (navigator.geolocation){ ...

    JavaScript实时全国天气 ,自动定位城市,

    • 采用百度api定位
    • 新浪天气接口获取当前城市天气
      这里写图片描述

    项目地址参考github地址:项目示例


    js代码片段

    //获取位置
    function getLocation(){
    if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
    }else{
    alert(‘不支持获取位置’);
    }
    }
    //显示地图
    function showPosition(position){
    // 百度地图API功能
    var map = new BMap.Map(“allmap”);
    var point = new BMap.Point(position.coords.longitude,position.coords.latitude);
    map.centerAndZoom(point,12);
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);
    }
    //获取市
    function myFun(result){
    var city = result.name;
    if(city && city.indexOf(‘市’) !=-1){
    city = city.replace(/市/, “”);
    }else{
    city =”“;
    }
    alert(‘city:’+city);
    getWea(city);

     }
    
    function getWea(cityName){
          //新浪接口  city=城市或者缩写,不输入自动识别城市
            $.getScript('http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=0&city='+ cityName+'&dfc=1&charset=utf-8',function(a){
            var s="",r="",q="";
            for(s in window.SWther.w){
                q=SWther.w[s][0];
                r={city:s,date:SWther.add.now.split(" ")[0]||"",day_weather:q.s1,night_weather:q.s2,day_temp:q.t1,night_temp:q.t2,day_wind:q.p1,night_wind:q.p2};
                console.log(r);
            var default_tr=false;
                var default_img='./wea_img/default.png';
                    if(q.s1.indexOf('到') !=-1 && q.s1.indexOf('转') !=-1 ){  //有转有到 取转
                        var wea_one =q.s1.split('转'); 
                            q.s1 =wea_one[1]; 
                            console.log("转:"+q.s1);    
                }else{
                    if(q.s1.indexOf('到') !=-1 || q.s1.indexOf('转') !=-1 ){ 
                                if(q.s1.indexOf('到') !=-1){  
                                        var wea_one =q.s1.split('到'); 
                                        q.s1 =wea_one[1]; 
                                        console.log("到:"+q.s1);
                                }else{
                                    var wea_one =q.s1.split('转'); 
                                        q.s1 =wea_one[1]; 
                                        console.log("转:"+q.s1);
                                }
    
                    }
                }
    
                //匹配
                for(var i=0; i<dataList.length;i++){
                    if(dataList[i].weather.indexOf(q.s1) !=-1){
                        console.log(dataList[i].weather);
                        var img_url =dataList[i].img;
                        $('#imgs').attr('src',img_url);
                        default_tr =true ;
                        break;
                    }
                }
                //没有匹配
                if(!default_tr){
                $('#imgs').attr('src',default_img);
                }
    
                //温度
                var warm_html ="";
                if(r.day_temp>r.night_temp){
                    warm_html = r.night_temp+"~"+ r.day_temp;
                }else{
                    warm_html = r.day_temp+"~"+ r.night_temp;
                }
                $("#city").html(r.city);
                $("#warm").html(warm_html+"℃");
            }
        });
    }
    
    getLocation();
    </script>
    
    展开全文
  • 在做小程序开发的时候会遇到这种功能,比如一个卖电影票的小程序有这样一个功能,就是你在哪个地方会显示哪个地方的影城,这个时候咱们就需要让它自动定位到当前的你所在的城市。好了,我们来看一下怎么实现的。 ...

    在做小程序开发的时候会遇到这种功能,比如一个卖电影票的小程序有这样一个功能,就是你在哪个地方会显示哪个地方的影城,这个时候咱们就需要让它自动定位到当前的你所在的城市。好了,我们来看一下怎么实现的。
    这里我们使用百度地图来实现,百度地图中有微信小程序JavaScript API(http://lbsyun.baidu.com/index.php?title=wxjsapi)可以供我们进行参考,首先要获取服务秘钥(ak)才能使用相关的功能
    在这里插入图片描述
    在这里插入图片描述
    获取成功后开始环境的配置
    在这里插入图片描述
    配置完后,来写一下这个功能,在pages/index/index.wxml中写入如下代码

    <view class="container">
      <view class="header">
      	<!--这里的city就是我们要获取的城市-->
        <view class="localtion">{{city}}</view>
        <view class="header_tab">
          <text>正在热映</text>
          <text>即将上映</text>
        </view>
      </view>
    </view>
    

    微信小程序要用地理位置需要开一个权限,我们可以在app.json中配置一下

    {
      "pages": ["pages/index/index"],
      "permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于小程序位置接口的效果展示" 
        }
      }
    }
    

    想要获取到当前位置还需要下载一个js文件(下载地址:https://mapopen-website-wiki.cdn.bcebos.com/wechat-api/wxapp-jsapi-master.zip),解压完成后拿到bmap-wx.min.js文件将其引入到项目中
    在这里插入图片描述

     // 引用百度地图微信小程序JSAPI模块 
    var bmap = require('../../assets/js/bmap-wx.min'); 
    var wxMarkerData = []; 
    
    Page({
      data: {
        city: '正在获取地址'
      },
      onLoad: function (options) {
        	var that = this; 
            // 新建百度地图对象 
            var BMap = new bmap.BMapWX({ 
                ak: '您的ak'  //这里要添加你刚刚创建的ak
            }); 
            var fail = function(data) { 
                console.log(data) 
            }; 
            var success = function(data) { 
                wxMarkerData = data.originalData.result.addressComponent.city; 
                that.setData({ 
                    city: wxMarkerData 
                })
            } 
            // 发起geocoding检索请求 
            BMap.regeocoding({ 
                fail: fail, 
                success: success
            }); 
      },
    

    基本上就可以实现自动获取城市的功能了,但有可能会出现如下错误:
    在这里插入图片描述
    下面是解决方式:
    在这里插入图片描述
    在这里插入图片描述
    ok,今天就到这里啦~

    展开全文
  • 网上关于百度地图ADI对位的Demo很多,但是找一个定位到当前城市和得到城市名字却很少,很多项目中都有自动地位到当前城市显示城市名字的的功能,我也遇到需要此功能的需求,但是找了好久都没用,于是根据自己写了一...
  • 在做小程序开发的时候会遇到这种功能,比如一个卖电影票的小程序有这样一个功能,就是你在哪个地方会显示哪个地方的影城,这个时候咱们就需要让它自动定位到当前的你所在的城市。好了,我们来看一下怎么实现的。这里...
  • vue项目中使用高德地图的api实现城市定位

    千次阅读 多人点赞 2020-05-10 19:55:39
    今天女朋友突发奇想,让我帮她做一个可以对所在城市进行自动定位的一个小功能。我二话没说,打开电脑就是一顿操作,操作记录如下(贼拉拉详细,无论小白还是大白,都可看得懂): 使用Vue-CLI构建一个Vue项目。 在...
  • <html> <head> <meta ... charset=utf-8" />...自动获取定位访问者当前城市</title> <!--不可省略--> <script type="text/javascript" ...
  • //根据百度API,根据来访IP自动获取出该IP所在的位置及更多信息,参数IP为空时,会使用当前访问者的IP地址作为定位参数 //sServerAK为用户密钥 string 必选,在lbs云官网注册的access key,作为访问的依据,定期从h....
  • IOS自动定位使用的是高德地图SDK 在高德开放平台http://lbs.amap.com/api/ios-sdk/down/下载2D地图SDK和搜索SDK 将SDK导入工程内 按照高德的配置说明进行配置项目 最后需要提醒 在高德的SDK中有些文件夹使用的是...
  • 今天女朋友突发奇想,让我帮她做一个可以对所在城市进行自动定位的一个小功能。我二话没说,打开电脑就是一顿操作,操作记录如下(贼拉拉详细,无论小白还是大白,都可看得懂):使用Vue-CLI构建一个Vue项目。在src...
  • Unity 工具之 获取当前所在城市的天气数据的封装(自动定位当前所在城市,天气数据可以获得多天天数据) 目录 Unity 工具之 获取当前所在城市的天气数据的封装(自动定位当前所在城市,天气数据可以获得多天天...
  • 高德地图api之location定位

    万次阅读 多人点赞 2015-12-22 00:26:02
    这是一种通过使用高德JS-API来实现位置定位城市定位的方法,包含了IP定位,检索等多种网络定位方式。如果您的手机支持GPS功能,能够自动获取GPS信息,定位将更加准确。浏览器定位浏览器定位插件,封装了标准的...
  • 包括:地图初始化加载定位到当前城市浏览器定位IP定位获取当前城市信息地图初始化加载定位到当前城市创建AMap.Map对象时如果没有传入center参数,您会发现地图将自动定位到您所在城市并显示,这就是JS API的初始加载...
  • 今天女朋友突发奇想,让我帮她做一个可以对所在城市进行自动定位的一个小功能。我二话没说,打开电脑就是一顿操作,操作记录如下(贼拉拉详细,无论小白还是大白,都可看得懂):使用Vue-CLI构建一个Vue项目。在src...
  • 这是一种通过使用高德JS-API来实现位置定位城市定位的方法,包含了IP定位,检索等多种网络定位方式。如果您的手机支持GPS功能,能够自动获取GPS信息,定位将更加准确。 浏览器定位 浏览器定位插件,封装了...
  • 比如说天气预报程序可以根据用户所在的位置自动选择城市,发微博的时候我们可以向朋友晒一下自己的地理位置,不认识路的时候随时打开地图就可以查询路线;如果你出门打车用滴滴或Uber打车,你可以看到
  • 比如说天气预报程序可以根据用户所在的位置自动选择城市,发微博的时候我们可以向朋友晒一下自己的地理位置,不认识路的时候随时打开地图就可以查询路线;如果你出门打车用滴滴或Uber打车,你可以看
  • 自动定位 城市、区县(也支持手动) 输入框内,通过 拼音搜索 城市,支持全拼、简拼 亦可通过 侧边栏 选择,城市按拼音首字母排列 选择好城市后,自动显示辖下 区县 说明 使用(且小程序只能使用)腾讯地图的API ...
  • Android 定位功能简单实现

    千次阅读 2020-06-28 16:53:01
    让用户打开天气查询页时,能够自动定位当前所在城市,然后获取该城市的天气数据,是一个提升用户体验度的事情。 实现方式 使用集成百度或者高德地图的相关sdk 使用 adnroid sdk 自带的 api 来实现 其他 我这里...
  • 高德api总结

    千次阅读 2018-07-03 10:46:02
    1、根据地址定位接口AMap.Autocomplete说明根据详细或者模糊地址信息在地图中进行定位参数city可选,城市或者其他地址信息,默认“全国”Input可选,用来指定一个input输入框,自动生成下拉选择列表返回值回调地图...
  • 百度地图定位

    2018-11-15 16:46:00
    项目中有个需求:M站,当用户所处不同城市,M站的首页自动切换定位到当前所在城市 客户端APP,安装过程中,会弹出询问,是否获取权限,则,定会打开定位(比如:美团、饿了么) 方案A:通过浏览器获取定位 -------...
  • 这个页面要实现的需求是选择省份和城市县区后,下方地图可以自动定位到该区域,方便用户使用、查找地址信息。实现思路是通过省市县三级联动提供具体的经纬度来对地图进行定位,地图绘制调用了百度地图API来实现。 ...
  • 做为一个入行不足两年的... 当用户访问时自动定位到用户所在的城市。因为之前做微信开发的时候,研究过一段时间的百度地图api,拿到这个需求后,第一时间想到的就是ip定位api. 先贴出百度官方的说明: IP定位 API...
  • 比如天气预报 APP,可以根据用户所在的位置自动选择所在城市。约会时,可以通过微信发出碰头地点,让朋友们能够尽快过来等等。 确定出用户所在的位置。通常有两种技术: 技术 说明 优点 ...

空空如也

空空如也

1 2 3 4
收藏数 69
精华内容 27
关键字:

自动定位城市api