百度地图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实现移动端效果图
这篇写的比较简洁,因为官方的文档很详细了,个人只是用来记录下,没有写的太详细,见谅!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值