Baidu-地图

1.在HTML5中使用Geolocation.getCurrentPosition()方法来获取地理位置。 语法： navigator.geolocation.getCurrentPosition(success, error, options)参数： success: 成功得到位置信息时的回调函数，使用Position 对象作为唯一的参数。 error: 获取位置信息失败时的回调函数，使用 PositionError 对象作为唯一的参数，这是一个可选项。 options:一个可选的PositionOptions 对象,包含以下3个参数。 enableHighAccuracy 是一个Boolean值，用来表明应用是否使用其最高精度来表示结果，默认为false。 timeout 是一个正的long值，表明的是设备必须在多长时间（单位毫秒）内返回一个位置，默认是Infinity。 maximumAge 是一个正的long值，表明可以返回多长时间（即最长年龄，单位毫秒）内的可获取的缓存位置。如果设置为 0, 说明设备不能使用一个缓存位置，而且必须去获取一个真实的当前位置。如果设置为 Infinity ，那么不管设 置的最长年龄是多少，设备都必须返回一个缓存位置。默认值：0 2.success - 成功得到位置信息时的回调函数 navigator.geolocation.getCurrentPosition(function(position)) { // 获取成功时的的处理 //参数position是地理位置对象}position中返回的信息如下图： accuracy 获取到的纬度或者经度的精度(以米为单位)altitude 当前地理位置的海拨高度（不能获取为null）altitudeAccurancy 获取到的海拨高度的经度(以米为单位)heading 设备移动的方向（以度为单位）latitude 当前地理位置的纬度longitude 当前地理位置的经度speed 设备的前进速度(以米/秒为单位，不能获取时为null)timestamp 获取地理位置信息时的时间3.error - 获取位置信息失败时的回调函数 navigator.geolocation.getCurrentPosition(function(position){ // 获取成功时的的处理； //参数position是地理位置对象},function(error)) { // 获取失败时的的处理；}error中返回的信息如下图 code属性有以下值： - 1 地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。- 2 地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。- 3 获取地理位置超时，通过定义PositionOptions.timeout 来设置获取地理位置的超时时长。message 返回一个开发者可以理解的 DOMString 来描述错误的详细信息。 4.使用Geolocation.getCurrentPosition()注意事项： ...

概要本文只要涉及的内容有，web中动态引入百度地图，基于百度地图的本地搜索（公交，地铁，停车场），自定义marker，layer，接入微信内置地图（微信中使用第三方导航）。 效果预览 地图懒加载本示例应用于小程序内嵌的webview，web开发使用react。由于示例作为项目中的一个不必要模块，不是每次进入都会加载，因此选择在项目确定使用百度地图时，在进行加载。即动态加载百度地图的地图服务资源（代码直接从网上copy了一个）： MP(ak) { return new Promise(resolve=> { const script = document.createElement("script"); script.type = "text/javascript"; script.src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`; document.head.appendChild(script); window.init = () => { resolve(window.BMap); }; }); }openBMap() { this.MP("你的ak").then(BMap => { this.bmap = new BMap.Map("allmap"); // 创建Map实例 const mPoint = new BMap.Point(103.96120956167579, 30.67880629052847); this.bmap.enableScrollWheelZoom(); this.bmap.centerAndZoom(mPoint, 15); const options = { onSearchComplete: (results) => { if (local.getStatus() == BMAP_STATUS_SUCCESS) { this.searchResults = results; this.generateMarker(0); // 生成marker } } }; const local = new BMap.LocalSearch(this.bmap, options); // local.searchNearby(["公交站", "地铁站", "停车场"], mPoint, 1200); }); }local.searchNearby 为搜索附近api，搜索参数依次为搜索内容（string| arr["obj"]），搜索中心点，搜索范围。详细参考：http://lbsyun.baidu.com/cms/j... ...

1、前言最近公司要给政府机关做项目要用到地图但是只限局域网所以要用到离线地图，在网上搜索了一些有用的文章并成功制作成功百度离线地图，希望能帮助到大家。 2、百度离线地图制作思路制作百度离线地图，分为6步： 下载百度JS API文件为本地文件；屏蔽百度ak验证；引用本地模块资源；下载所需城市或地区瓦片；按照想要的地区或城市切片；加载瓦片改为本地离线瓦片；2.1、下载百度JS API文件为本地文件访问baidu map api地址，代码如下： (function(){ window.BMap_loadScriptTime = (new Date).getTime(); document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20190527152033"></script>');})();然后复制上面代码中的http://api.map.baidu.com/gets...，并访问该网址，如图所示： 打开之后我们格式化代码并下载该文件，文件暂时命名为：map_offline_api_v3.0_min.js 2.2、屏蔽百度ak验证打开map_offline_api_v3.0_min.js文件，如下： 2.3、引用本地模块资源百度地图提供的各种图层类，标记类，控件类等等都可以看作是modules,当你在地图中用到这些模块时，它会自动加载，因此我们需要先把这些模块的js文件下载下来，保存到本地。定位到下面代码，没数错的话，一共是44个模块。 var Tb = { map: "se12k1", common: "jrzmva", style: "mqdswt", tile: "arfjro", groundoverlay: "zel1ht", pointcollection: "mprn2z", marker: "qqpi40", symbol: "4pk2fw", canvablepath: "yjpor5", vmlcontext: "41oars", markeranimation: "niyh4j", poly: "at23pi", draw: "arixo3", drawbysvg: "3vtpy2", drawbyvml: "zyy3jn", drawbycanvas: "ftbugn", infowindow: "itkghs", oppc: "xno3ew", opmb: "pg3p52", menu: "1hsakk", control: "r2lwlu", navictrl: "euxavb", geoctrl: "rxrafb", copyrightctrl: "fmarj0", citylistcontrol: "2qdahf", scommon: "cw3rwv", local: "lzkddz", route: "s0id2r", othersearch: "qmkldj", mapclick: "ooymdg", buslinesearch: "ltu1xb", hotspot: "4kz5w3", autocomplete: "fzh4vi", coordtrans: "m2wqef", coordtransutils: "hc2s5r", convertor: "xm44lc", clayer: "ikdlfv", pservice: "ankscv", pcommon: "qboudv", panorama: "50hi0x", panoramaflash: "rechul" };为了便于修改主文件里的一些内容，先创建一个map_load.js文件，加入下面代码： ...

百度地图提供了开放的API，使用方法WEB服务API 右上角登陆账号 -> 点击“获取密钥” -> “创建应用” -> 填写应用名称&白名单IP -> 然后复制AK(例如u2uqy7Gxui0XyBdcHLU0D3hQINLKokc0)然后直接上代码API提供了3种方式 1 行政区划区域检索2 圆形区域检索3 矩形区域检索详情可见API详情本文以 1,3为例 import requestsurl = "http://api.map.baidu.com/place/v2/search"querystring = {"query":"市场","region":"深圳","output":"json","ak":"你的ak","page_size":20,"page_num":0}response = requests.request("GET", url, params=querystring)r = response.json()print(r['results'])print(len(r['results']))返回结果如下 [{'name': '南山市场', 'location': {'lat': 22.531757, 'lng': 113.926754}, 'address': '南新路2008', 'province': '广东省', 'city': '深圳市', 'area': '南山区', 'street_id': 'd6df91c124f80073f7b9164d', 'telephone': '13590117093', 'detail': 1, 'uid': 'd6df91c124f80073f7b9164d'}, {'name': '笋岗文具玩具礼品批发市场', 'location': {'lat': 22.564115, 'lng': 114.114963}, 'address': '宝安北路1025号', 'province': '广东省', 'city': '深圳市', 'area': '罗湖区', 'street_id': '28e700f171893318095cb34a', 'telephone': '(0755)82268844', 'detail': 1, 'uid': '28e700f171893318095cb34a'}, {'name': '嶂背综合市场', 'location': {'lat': 22.692344, 'lng': 114.255645}, 'address': '广东省深圳市龙岗区嶂背路216号', 'province': '广东省', 'city': '深圳市', 'area': '龙岗区', 'street_id': '4fc3161a8a8d3db03a13fd59', 'detail': 1, 'uid': '4fc3161a8a8d3db03a13fd59'}, {'name': '圳美市场', 'location': {'lat': 22.796433, 'lng': 113.951935}, 'address': '广东省深圳市光明区光明新区喜乐多百货(康明路东)', 'province': '广东省', 'city': '深圳市', 'area': '光明区', 'street_id': '5ffe414874a5986d9fec2b06', 'detail': 1, 'uid': '5ffe414874a5986d9fec2b06'}, {'name': '牛湖农贸市场', 'location': {'lat': 22.730088, 'lng': 114.095257}, 'address': '观澜镇牛湖村高尔夫大道旁', 'province': '广东省', 'city': '深圳市', 'area': '龙华区', 'street_id': '8f6d8c61968269a36c47605b', 'detail': 1, 'uid': '8f6d8c61968269a36c47605b'}, {'name': '坪山综合批发市场', 'location': {'lat': 22.695807, 'lng': 114.346117}, 'address': '坪山区新区东纵路470号坪山批发市场公交车站旁六和工地', 'province': '广东省', 'city': '深圳市', 'area': '坪山区', 'street_id': '550fd5f96c6d9060931fc955', 'detail': 1, 'uid': '550fd5f96c6d9060931fc955'}, {'name': '坪西市场', 'location': {'lat': 22.765712, 'lng': 114.292258}, 'address': '吉祥一路23号', 'province': '广东省', 'city': '深圳市', 'area': '龙岗区', 'street_id': '87248d96c13e62aa2806ce5a', 'detail': 1, 'uid': '87248d96c13e62aa2806ce5a'}, {'name': '友信冷冻食品城', 'location': {'lat': 22.66691, 'lng': 114.13473}, 'address': '深圳市龙岗区南湾街道上李朗社区平吉大道78号', 'province': '广东省', 'city': '深圳市', 'area': '龙岗区', 'street_id': 'd8ef3b08c51b727a58bbbc69', 'telephone': '(0755)88263688', 'detail': 1, 'uid': 'd8ef3b08c51b727a58bbbc69'}, {'name': '石岩新村综合市场', 'location': {'lat': 22.679288, 'lng': 113.930496}, 'address': '深圳市宝安区王家庄市场1号301', 'province': '广东省', 'city': '深圳市', 'area': '宝安区', 'street_id': '593850fb068b9720df1e526b', 'detail': 1, 'uid': '593850fb068b9720df1e526b'}, {'name': '新陂头农贸市场', 'location': {'lat': 22.807519, 'lng': 113.948556}, 'address': '深圳市光明区康弘路13号', 'province': '广东省', 'city': '深圳市', 'area': '光明区', 'detail': 1, 'uid': '3a0a78bd2b341d86631809d9'}, {'name': '爱华肉菜市场', 'location': {'lat': 22.544775, 'lng': 114.098053}, 'address': '爱华路47号', 'province': '广东省', 'city': '深圳市', 'area': '福田区', 'street_id': 'b533ea4af6bb89584f6d4645', 'telephone': '(0755)83620019', 'detail': 1, 'uid': 'b533ea4af6bb89584f6d4645'}, {'name': '茜坑老村综合市场', 'location': {'lat': 22.69478, 'lng': 114.036412}, 'address': '新区观澜', 'province': '广东省', 'city': '深圳市', 'area': '龙华区', 'street_id': '50fb64ff5a658e20e9f8531b', 'telephone': '13885524446', 'detail': 1, 'uid': '50fb64ff5a658e20e9f8531b'}, {'name': '利民农贸批发市场', 'location': {'lat': 22.742953, 'lng': 114.289898}, 'address': '广东省深圳市龙岗区深惠路1256号', 'province': '广东省', 'city': '深圳市', 'area': '龙岗区', 'street_id': '61f634f6fce2e8616a49f3aa', 'detail': 1, 'uid': '61f634f6fce2e8616a49f3aa'}, {'name': '龙岗第一市场', 'location': {'lat': 22.73833, 'lng': 114.287002}, 'address': '广东省深圳市龙岗区龙岗第一市场(龙岗大道西)', 'province': '广东省', 'city': '深圳市', 'area': '龙岗区', 'street_id': '0143dd2b837c3381cf06a435', 'detail': 1, 'uid': '0143dd2b837c3381cf06a435'}, {'name': '回龙埔综合市场', 'location': {'lat': 22.736316, 'lng': 114.241372}, 'address': '深圳市龙岗区龙平西路26', 'province': '广东省', 'city': '深圳市', 'area': '龙岗区', 'street_id': 'd219bb1dc2beb792f50e775d', 'telephone': '18926789088', 'detail': 1, 'uid': 'd219bb1dc2beb792f50e775d'}, {'name': '公明综合市场', 'location': {'lat': 22.786351, 'lng': 113.899172}, 'address': '光明区公明街道振明路145-5', 'province': '广东省', 'city': '深圳市', 'area': '光明区', 'detail': 1, 'uid': '1eeed5464e94e5ebb5147f4c'}, {'name': '民治综合街市', 'location': {'lat': 22.630651, 'lng': 114.045652}, 'address': '深圳市龙华区民治大道412', 'province': '广东省', 'city': '深圳市', 'area': '龙华区', 'street_id': 'd0b8923fcf5d4bfbb5f42f5f', 'detail': 1, 'uid': 'd0b8923fcf5d4bfbb5f42f5f'}, {'name': '荔园集贸批发市场', 'location': {'lat': 22.698857, 'lng': 114.141112}, 'address': '平湖镇景秀三巷7号', 'province': '广东省', 'city': '深圳市', 'area': '龙岗区', 'street_id': '7ee3ccf7b8aed470047ce87c', 'telephone': '(0755)28852881', 'detail': 1, 'uid': '7ee3ccf7b8aed470047ce87c'}, {'name': '富民铁路市场', 'location': {'lat': 22.617064, 'lng': 114.126306}, 'address': '广东省深圳市龙岗区布李路164号', 'province': '广东省', 'city': '深圳市', 'area': '龙岗区', 'street_id': '96e3e1a27685cb82cae33c57', 'detail': 1, 'uid': '96e3e1a27685cb82cae33c57'}, {'name': '盐田海鲜批发市场', 'location': {'lat': 22.590926, 'lng': 114.284179}, 'address': '深圳市盐田区海鲜街28', 'province': '广东省', 'city': '深圳市', 'area': '盐田区', 'street_id': 'fc7675243816e6e34f776ea2', 'telephone': '(0755)25202868', 'detail': 1, 'uid': 'fc7675243816e6e34f776ea2'}]返回20条page_size最大为20page_num参数可以控制页码数下面是重点！ ...