必应地图api文档,微软必应地图web开发版详解,可以在国内使用国外地图
最近,公司项目要求在页面中嵌入地图,需求还算简单,但是由于必须具备响应式(主要是pc和移动端),而且由于公司业务是全球性的,要支持国外地点搜索。考虑到百度,腾讯,高德等等国内地图无法显示国外数据,谷歌在国内基本被废,对于全球通用的地图,目测只有微软的必应可以支持了(那些国外小厂的地图插件暂且不提)。虽然必应地图没有谷歌那么强大,但也基本能满足业务需求。所以在此做个简单的记录,方便以后查阅,也方便与我有同样需求的人参考。如有不对,欢迎指正。
官网地址:https://www.bingmapsportal.com/?lc=1033
网上有两个必应地图文档,这个文档更适合web开发,更加人性化,并非是sdk版,我也更加喜欢这个版本的api文档
1.申请一个密钥key:https://www.bingmapsportal.com/Application
申请成功后,就可以在文档中查看效果:
官方api文档地址:https://www.bingmapsportal.com/ISDK/AjaxV7#SearchModule2
Create map:创建一个地图,需要填入你刚申请的key:
map = new Microsoft.Maps.Map(document.getElementById('SDKmap'), {credentials: 'Your Bing Maps Key'});
Map with bounding box:带有边界的地图,需要在配置里填上边界的坐标即可:
var boundingBox = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(47.618594, -122.347618), new Microsoft.Maps.Location(47.620700, -122.347584), new Microsoft.Maps.Location(47.622052, -122.345869));
map = new Microsoft.Maps.Map(document.getElementById('SDKmap'), {credentials: 'Your Bing Maps Key', bounds: boundingBox});
Map with center:指定地图的中心,需要填入坐标值,其中zoom为地图缩放比例
map = new Microsoft.Maps.Map(document.getElementById('SDKmap'), {credentials: 'Your Bing Maps Key', center: new Microsoft.Maps.Location(47.609771, -122.2321543125), zoom: 8});
Map with Bird's eye view:初始化时就显示鸟瀚图,zoom调整到最大值,并在缩放中始终显示实景图:
map = new Microsoft.Maps.Map(document.getElementById('SDKmap'), {credentials: 'Your Bing Maps Key', center: new Microsoft.Maps.Location(47.6215, -122.349329), mapTypeId: Microsoft.Maps.MapTypeId.birdseye, zoom: 18});
Add default pushpin:图钉,可以在地图上指定地点使用一个或多个图钉,并且图钉的样式有多种选择,例如:
map.entities.clear();
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), null);
map.entities.push(pushpin);
Infobox:提示框,可以在地图中弹出提示框,并且提示框的大小高度,样式都可以调整,例如:
map.entities.clear();
var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), null);
map.entities.push(defaultInfobox);
Find directions:路线,可以在地图上标明两地点的路线图:
var start= 'Seattle, wa'; var end= 'Portland, OR';
map.getCredentials(function(credentials) {
var routeRequest = 'https://dev.virtualearth.net/REST/v1/Routes?wp.0=' + start + '&wp.1=' + end + '&routePathOutput=Points&output=json&jsonp=RouteCallback&key=' + credentials;
var mapscript = document.createElement('script');
mapscript.type = 'text/javascript';
mapscript.src = routeRequest;
document.getElementById('SDKmap').appendChild(mapscript);
});
Get location:定位,可以获取用户的坐标,并可以加入回调(由于这里我用了vpn,所以把我定位到了日本了):
map.entities.clear();
var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
geoLocationProvider.getCurrentPosition();
displayAlert('Current location set, based on your browser support for geo location API');
Directions module:更强大的路线标识,可以作为路线参考:
function createDrivingRoute()
{
if (!directionsManager) { createDirectionsManager(); }
directionsManager.resetDirections();
// Set Route Mode to driving
directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
var seattleWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'Seattle, WA' });
directionsManager.addWaypoint(seattleWaypoint);
var tacomaWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'Tacoma, WA', location: new Microsoft.Maps.Location(47.255134, -122.441650) });
directionsManager.addWaypoint(tacomaWaypoint);
// Set the element in which the itinerary will be rendered
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });
displayAlert('Calculating directions...');
directionsManager.calculateDirections();
} if (!directionsManager)
{
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: createDrivingRoute });
}
else
{
createDrivingRoute();
}
Find a location by address:通过地点来获取位置,这里只需要写入地点名,不需要坐标也可以:
function geocodeRequest()
{
createSearchManager();
var where = 'Denver, CO';
var userData = { name: 'Maps Test User', id: 'XYZ' };
var request =
{
where: where,
count: 5,
bounds: map.getBounds(),
callback: onGeocodeSuccess,
errorCallback: onGeocodeFailed,
userData: userData
};
searchManager.geocode(request);
}
function onGeocodeSuccess(result, userData)
{
if (result) {
map.entities.clear();
var topResult = result.results && result.results[0];
if (topResult) {
var pushpin = new Microsoft.Maps.Pushpin(topResult.location, null);
map.setView({ center: topResult.location, zoom: 10 });
map.entities.push(pushpin);
}
}
}
function onGeocodeFailed(result, userData) {
displayAlert('Geocode failed');
} if (searchManager)
{
geocodeRequest();
}
else
{
Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: geocodeRequest });
}
注意,还有更多更强大的功能,这里无法一一列举出来,只是举例了开发常用到的api,用法也很简单,如有不全面的,请移步到官方api查看,若发现有错误之处,欢迎留言。
官方文档:https://www.bingmapsportal.com/ISDK/AjaxV7#CreateMap1
必应地图api文档,微软必应地图web开发版详解,可以在国内使用国外地图的更多相关文章
- 百度地图api文档实现任意两点之间的最短路线规划
两个点之间的路线是使用“Marker”点连接起来的,目前还没找到改变点颜色的方法,测试过使用setStyle没有效果. <html><head> <meta http-e ...
- 地图API文档
目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2 1.2 URL API:... 2 1.3 静态图AP ...
- 使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解(新手必学)
为大家介绍下Python爬虫库BeautifulSoup遍历文档树并对标签进行操作的详细方法与函数下面就是使用Python爬虫库BeautifulSoup对文档树进行遍历并对标签进行操作的实例,都是最 ...
- 《TomCat与Java Web开发技术详解》(第二版) 第四章节的学习总结--常用Servlet API
要开发Servlet,自然要掌握常用的servlet的相关API.通过此章节的学习,了解到如下常用API 1.Servlet接口--->GenericServlet抽象类(实现Servlet接口 ...
- 开源的API文档工具框架——Swagger简介
初次接触Swagger是在2017年5月,当时公司正好要对整套系统架构进行重新设计,有同事推荐用这个技术框架来规范后台接口的API文档.当时因为架构重构,涉及改造的技术点太多,一时也就没太多精力,把S ...
- eclipse如何为java项目生成API文档、JavaDoc
当我们的项目很大,编写了很多代码的时候,就需要生成一个标准的API文档,让后续的开发人员,或者合作者可以清晰的了解您方法的使用,那么如何将自己的项目生成API文档呢? 1.点击eclipse的[Pro ...
- API文档管理平台
一.应用场景 在公司中,有很多开发,每个人维护的api接口是不一样的.如果有一个统一的api文档管理平台,每个开发,把自己维护的接口录入进去. 之后再开发别的功能时,不需要重复造轮子,直接调用就可以了 ...
- eclipse 中为 java 项目生成 API 文档、JavaDoc
当我们的项目很大,编写了很多代码的时候,就需要生成一个标准的 API 文档,让后续的开发人员,或者合作者可以清晰的了解您方法的使用. 1.点击 eclipse 的 Project 菜单,选择 Gene ...
- 什么是API文档?--斯科特·马文
有时候,软件开发人员想要的是自己的软件被其他应用软件所应用,而不是让人来操作.API使各种应用软件互相通信成为了可能. 从事API文档写作15年,我亲眼见证了API产品的崛起.各个公司开始搭建平台,希 ...
随机推荐
- Redis缓存服务搭建及实现数据读写--转载
来自 http://www.cnblogs.com/lc-chenlong/p/3218157.html 1. 下载安装Redis 下载地址:https://github.com/MSOpenTec ...
- 配置 php-fpm 监听的socket
一般现在我们配置的PHP的web环境,如LNMP(linux+Nginx+Mysql+PHP), 这里linux可能是centos, ubuntu..., 数据库可能是mysql, postgresq ...
- php中serialize、unserialize与json_encode、json_decode比较
性能比较 同一个变量编码或解码10000次,每个函数执行10000次所需时间 php5.2.13 json : 190 serialize : 257 json_encode : 0.08364200 ...
- Hadoop MapReduce开发最佳实践(上篇)
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- 程序ajax请求公共组件:app-jquery-http.js
// --------网络操作-------------------- $.HTTP = { getUrlParam : function(name) { var reg = new RegExp(& ...
- AOP:代理实现方式①通过继承②通过接口
文件结构: 添加日志: package com.wangcf.manager; public class LogManager { public void add(){ System.out.prin ...
- Android 编译错误
本人使用的是Android studio1.3版本,前几天调试通过的项目,现在编译出现了错误.错误信息如下 Project app: apk dependencies can only be jars ...
- 起步X5 的铛铛的安装部署过程
(2017年1月)主要资料: 1.铛铛的IM Server即时通信服务使用 actor https://github.com/actorapp/actor-platform ,开发者网站是:htt ...
- CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8
CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...
- 10天学会phpWeChat——第九天:数据库增、删、改、查(CRUD)操作
数据库的操作(CRUD)是一个现代化计算机软件的核心,尤其针对web应用软件.虽然在前面的几讲里,我们针对数据库操作大致有了一些了解,但今天我们需要再次强化下. 除了新瓶装老酒,我们今天还引入一个新的 ...