百度地图API实现自动定位城市，省市二联重新地图重新定位

来源：互联网发布：java能做什么好玩的编辑：程序博客网时间：2024/05/01 17:16

最近遇到定位问题，借助百度地图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