Biying地图实战

由于公司业务需要,需要世界范围内的地图信息,这就尴尬了,国内的地图都用不了。

国外的地图目前有两种选择:谷歌和必应。

谷歌就不多说了,在国内几乎用不了(当然就不说了)。

那就只剩下必应,于是就开启了填坑的道路。。。。。

满心欢喜的打开必应的官网,激动啊,边查api一边就开始开发,不到一天,ok啦。

好,测试测试。

来试试我们极其强大的ie....完了,显示不了。。。。。一直排查排查。。。没错啊,一气之下把官网的例子直接在ie下打开,额。。。也不显示。这就很尴尬。

好了吐槽完了,开始说正题吧。

首先十分感谢这位同学http://www.cnblogs.com/aiyunyun/p/6292567.html的博客,这是我的启蒙老师啊。

前期的准备工作呢这篇博客里将的很细致,我下来就说说我遇到的问题吧。

既然官网的办法行不通,那就找资料呗,(吐槽下,资料是真的少),功夫不负有心人啊,让我在网上找到了一个文档。按照文档的写法,ie终于出来了。。。

 

先来看看代码:

首先在你的页面引入

到了这里你的key肯定是有了。

那就让地图出来吧:

var map = new Microsoft.Maps.Map(document.getElementById("myMap"),{

credentials:"key",
center: new Microsoft.Maps.Location(13.7469613000,100.6087339000),
zoom:15,
});

这里面的参数我就不一一解释了,后面附上文档大家自己看吧!

简单说一下几个用到的功能:

添加标注点

 

var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {icon:"线上图片路径",height:35,width:28});
map.entities.push(pin);

 

显示周围公共设施:

 

function DisplayNearbyVenueCount(venues){
var displayResults = "Nearby venues with available venue maps:\n";
if(venues.length == 0){
$(".citylist").hide();
}
for (var i=0; i var lat = venues[i].metadata.CenterLatitude;
var Long = venues[i].metadata.CenterLongitude;
var loc = new Microsoft.Maps.Location(lat, Long);
var _li = $("

  • ");
    _li.attr("long",Long);
    _li.attr("lat",lat);
    var spna1 = $("");

    var index = i + 1 +"";
    spna1.html(index);
    spna1.appendTo(_li);
    var div1 = $("");
    div1.html(venues[i].metadata.Name);
    div1.appendTo(_li);
    var div2 = $("
    ");

    var dis = venues[i].distance + "";
    div2.html(dis.substring(0,dis.indexOf(".")) + "m");
    div2.appendTo(_li);
    _li.appendTo($(".citylist-ul"));

    _li.click(function(){
    var _lat = $(this).attr("lat");
    var _Long = $(this).attr("long");

    map.setView({center: new Microsoft.Maps.Location(_lat, _Long), zoom: 15});

    });
    var pin = new Microsoft.Maps.Pushpin(loc, {text: index});
    map.entities.push(pin);
    //displayResults = displayResults + venues[i].metadata.Name + "\t" + venues[i].distance/1000 + " km\n";
    }
    //alert(displayResults);
    }
    function venuemapsModuleLoaded(){
    var vmaps = new Microsoft.Maps.VenueMaps.VenueMapFactory(map);
    vmaps.getNearbyVenues({map: map, location: map.getCenter(), radius:10000, callback:DisplayNearbyVenueCount});

    }

     

    Microsoft.Maps.loadModule('Microsoft.Maps.VenueMaps', { callback: venuemapsModuleLoaded });

     

    Tips:Microsoft.Maps.VenueMaps这个服务可以返回中心点周围指定范围内的公共设施,包括了医院,商场,游乐场,大学,公园等,详细的信息

     

    包括有经纬度信息,名称信息,距离标注点距离信息等(还是蛮强大的)

    在这个服务的回调函数中我们可以自定义信息组件来显示所需要的信息,

    这里说一下,官网的周边信息是通过entityID来获取的对应的有医院啊这些,可以做筛选,但这边的api我没有发现,哪位道友要是发现了,告知小弟一下

    当然了必应地图肯定不止这些功能还有很多强大的功能就不一一介绍了,有兴趣的道友自己去api看看吧。

     

    附上文档:链接: https://pan.baidu.com/s/1min8vZq 密码: rcux

    转载于:https://www.cnblogs.com/wangkdeblogs/p/7651684.html

    你可能感兴趣的:(javascript,ViewUI)