精华内容
下载资源
问答
  • bing map
    2020-11-01 16:05:17

    用BingMap画图

    脑阔疼,最近跟着老师一起做项目使用到了GIS,要求用JS画一张简单的地图。地图上要求有两点:

    1. 标注两个点
    2. 两个点对应的要有两个提示框

    首先,讲讲为啥用的BingMap吧,本来项目使用的是Supermap。但突然加了一个要求,地图要是英文显示的,这可把我难死了。一开始想省事,认为supermap有参数可以改,使地图成英文版的。(ps:这里先解释一下,汉化版的地图,我是用的SuperMap.Layer.Baidu()方法加载出来的)

    最后,本着偷懒的想法,找了一上午的办法,如何设置参数修改成英文版的地图,结果证明终是错付。最后,脑袋一闪想起来换谷歌地图,谷歌可以直接换成英文版。但是事实给予我痛击,谷歌在国内真的行不通,所以,就有了这篇文章。

    回到主题,也就是如何在前端页面渲染BingMap。这里笔者大概给分了几步。

    1. 申请Bing Map Key
      只要你需要画Map,调用了Api,那么你就必须要申请它的key。这里给一个申请的地址Bing Map Key。怎么申请,我这就不啰嗦了。Key复制好,准备用就对了。
    2. 在你的h5页面里,引用底下这句话
      这里注意几点,首先调用的api执行了回调函数GetMap(),这个函数必须与js文件里加载地图的函数名一样;再者是setLang=en-US,这决定了地图渲染到底使用的是什么语言;最后,把你自己的Key添上去的时候,要把‘[]’,中括号去掉。
        <script type='text/javascript'
            src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&setLang=en-US&key=[PUT_YOUR_KEY]'
            async defer></script>
    
    1. 然后就是在h5页面放置一个空容器,用来存放地图,然后就是js渲染了
        <div id="myMap" style="position:relative;width:100%;height:100%;"></div>
    
    1. 我把js文件拆开读读,当成笔记。(以一个点为例)
    a.加载底图
    
      map = new Microsoft.Maps.Map("#myMap", {
        // showSearchBar: true, 
        center: new Microsoft.Maps.Location(30.446109, 114.906618), //底图加载出来后的中心点,按需要自己定
        zoom: 10, //地图加载后首次的缩放级别
      });
    
    b.定义需要的变量
    
      //创建一个提示框的模板
      var infoboxTemplate =
      '<div class="customInfobox"><div class="title">{title}</div>{description}</div>';
      //Attention!!! Microsoft.Maps.Location(lat, lon),latitude first,then the longitude
      //注意,这里和supermap里的lonlat不同,经纬度是反的。数据就不给了,给个示范就行。
      var point1 = new Microsoft.Maps.Location(lat1, lon1);
      //create infobox information
      //创建提示框,修改了展示数据
      var title =
        '<div id="box-top"><h4 style="margin: 0; padding: 0%; font-size: 18px; text-align: center;">XXXX</h4></div>';
      description1 =
        '<div id="box-center"><div id="things" style="float: left;">DDD</div></div>';
      description1 +=
        '<div id="box-bottom"><span id="r1">R1</span><br><span id="r2">R2</span></div>';
        
      //Some HTML to add a close button to the infobox.
      //给每一个提示框加一个close按钮,并添加closeInfobox1()事件
      var closeButton1 =
        '<a href="javascript:closeInfobox1()" class="customInfoboxCloseButton">X</a>';
    
    c.加载提示框
    
      infobox1 = new Microsoft.Maps.Infobox(point1, {
        // showPointer: true,
        // showCloseButton: true,
        // visible: false  //设置提示框是否可见,这是个很重要的参数
        htmlContent:
          infoboxTemplate
            .replace("{title}", title)
            .replace("{description}", description1) + closeButton1,
        // offset: new Microsoft.Maps.Point(0, -150)
      });
        //Assign the infobox to a map instance.
      infobox1.setMap(map);
    
    d.加载图钉(Pushpin,相当于supemap里的marker),并为图钉添加点击事件
    
      //create pushpins
      var pin1 = new Microsoft.Maps.Pushpin(point1, {
        icon: "/img/markerbig_select.png",
        // color: 'red',
        // anchor: new Microsoft.Maps.Point(12, 39),  //similar to offset
      });
      //Add the pushpin to the map
      map.entities.push(pin1);
      
      Microsoft.Maps.Events.addHandler(pin1, "click", function () {
        showInfobox1("pushpinClick");   //单击触发showInfobox1()事件
      });
    
    function closeInfobox1() {
      infobox1.setOptions({ visible: false });   //点击关闭按钮,关闭提示框
    }
    
    function showInfobox1() {
      infobox1.setOptions({ visible: true });   //修改visible为true,也就是点击图钉,提示框显示
    }
    
    e.CSS样式(部分)--节选部分重要的CSS
    
             /*去掉版权之类,通俗点就是去水印*/
            .bm_bottomLeftOverlay {
                display: none;     
            }
    
            .MicrosoftMap .bm_bottomRightOverlay .CopyrightContainer.quadrantOverride{
                display: none;
            }
    

    至此英文版地图就制作完成了,具体的API请参考Bing Maps V8 Web Control Documention
    当然,也想知道SuperMap.Layer.BingMap()的用法,希望有大佬指点一下。

    更多相关内容
  • bing map

    2016-03-01 16:49:05
    可以用于绘制三角图,如矿物,颗粒大小等等等
  • 拥有全球数据库国内好像就只有百度地图有,高德、搜狗、腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap。 bing Map 使用教程(基础) 参考文档:...
  • bing map

    2019-03-20 03:35:31
    NULL 博文链接:https://zhao103804.iteye.com/blog/797428
  • MMM-Bingmap 基于必应地图的交通地图 需求Bing API创建一个帐户以使用api https://www.bingmapsportal.com/ 使用静态地图制作器来确定大小和位置 https://staticmapmaker.com/bing/ 设定档 { module: 'MMM-Bing...
  • bingmap

    2018-12-19 14:32:21
     <script type='text/javascript' src='https://cn.bing.com/api/maps/mapcontrol?branch=experimental&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' async defer></script>    var map;  function ...

    <!DOCTYPE html>
    <html>
        <head>
            <title>loadmapasyncHTML</title>
            <style type='text/css'>body{margin:0;padding:0;overflow:hidden;font-family:'Segoe UI',Helvetica,Arial,Sans-Serif}</style>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
            <script type='text/javascript' src='https://cn.bing.com/api/maps/mapcontrol?branch=experimental&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' async defer></script>
            <script type='text/javascript'>
                    var map;
                    function loadMapScenario() {
                    
    /*                
                    Microsoft.Maps.ConfigurableMap.createFromConfig(document.getElementById('myMap'), 'https://bingmapsisdk.blob.core.windows.net/isdksamples/configmap2.json', false, null, successCallback, errorCallback);
                    function successCallback(mapObj) {
                        document.getElementById('printoutPanel').innerHTML = 'success';
                    }
                    function errorCallback(message) {
                        document.getElementById('printoutPanel').innerHTML = message;
                    }
        */    

               //
    /*           
                        //map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
                        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        
                   
                        //51.50632, -0.12714 london
                        //34.264186, 108.947242 xi'an
                        center: new Microsoft.Maps.Location(34.264186, 108.947242),
                        mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                        //zoom: 10 
                        });
            */
                //        
                /*            
                         var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
                    document.getElementById('printoutPanel').innerHTML =
                        '<b>Map height</b> <br>' + map.getHeight() + '<br>';
                    document.getElementById('printoutPanel').innerHTML +=
                        '<b>Map width</b> <br>' + map.getWidth() + '<br>';
                    document.getElementById('printoutPanel').innerHTML +=
                        '<b>Map page x</b> <br>' + map.getPageX() + '<br>';
                    document.getElementById('printoutPanel').innerHTML +=
                        '<b>Map page y</b> <br>' + map.getPageY() + '<br>';
                    document.getElementById('printoutPanel').innerHTML +=
                        '<b>Map root element</b> <br>' + map.getRootElement().id + '<br>';    
                        */
        
    /*
    map.setOptions({
        maxZoom: 12,
        minZoom: 5
    });                

    map.setView({
        mapTypeId: Microsoft.Maps.MapTypeId.aerial,
        center: new Microsoft.Maps.Location(35.027222, -111.0225),
        zoom: 15
    });
    */

    ///

    var bounds = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(34.264186, 108.947242), new Microsoft.Maps.Location(34.364186, 109.047242));
      map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        /* No need to set credentials if already passed in URL */
        maxBounds: bounds ,
        supportedMapTypes: [Microsoft.Maps.MapTypeId.birdseye,Microsoft.Maps.MapTypeId.road, Microsoft.Maps.MapTypeId.aerial, Microsoft.Maps.MapTypeId.grayscale, Microsoft.Maps.MapTypeId.canvasLight,Microsoft.Maps.MapTypeId.canvasDark],
        //navigationBarMode: Microsoft.Maps.NavigationBarMode.compact,
        mapTypeId: Microsoft.Maps.MapTypeId.birdseye,// supportedMapTypes: [Microsoft.Maps.MapTypeId.birdseye,Microsoft.Maps.MapTypeId.road, Microsoft.Maps.MapTypeId.aerial, Microsoft.Maps.MapTypeId.grayscale, Microsoft.Maps.MapTypeId.canvasLight,Microsoft.Maps.MapTypeId.canvasDark] });
        zoom: 10,
        customMapStyle: {
            elements: {
                area: { fillColor: '#b6e591' },
                water: { fillColor: '#75cff0' },
                tollRoad: { fillColor: '#a964f4', strokeColor: '#a964f4' },
                arterialRoad: { fillColor: '#ffffff', strokeColor: '#d7dae7' },
                road: { fillColor: '#ffa35a', strokeColor: '#ff9c4f' },
                street: { fillColor: '#ffffff', strokeColor: '#ffffff' },
                transit: { fillColor: '#000000' }
            },
            settings: {
                landColor: '#efe9e1'
            }}
        });
    /*    
    // Highlighting the border of bounds on the map
    var boundsBorder = new Microsoft.Maps.Polyline([bounds.getNorthwest(),
        new Microsoft.Maps.Location(bounds.getNorthwest().latitude, bounds.getSoutheast().longitude),
        bounds.getSoutheast(),
        new Microsoft.Maps.Location(bounds.getSoutheast().latitude, bounds.getNorthwest().longitude),
        bounds.getNorthwest()], { strokeColor: 'red', strokeThickness: 5 });
    map.entities.push(boundsBorder);
    */
    /*
    setTimeout(function () {
        map.setOptions({
            customMapStyle: {
                elements: {
                    area: { fillColor: '#b5db81' },
                    water: { fillColor: '#a3ccff' },
                    tollRoad: { fillColor: '#50a964f4', strokeColor: '#50a964f4' },
                    arterialRoad: { fillColor: '#ffffff', strokeColor: '#ffffff' },
                    road: { fillColor: '#50fed89d', strokeColor: '#50eab671' },
                    street: { fillColor: '#ffffff', strokeColor: '#ffffff' },
                },
                settings: {
                    landColor: '#dfdfdf'
                }
            }
        });
    }, 3000);
    */



      
       //                    
        /*            
    document.getElementById('printoutPanel').innerHTML =
        '<b>Map center</b> <br>' + map.getCenter() + '<br>';
    document.getElementById('printoutPanel').innerHTML +=
        '<b>Map bounds</b> <br>' + map.getBounds() + '<br>';
    document.getElementById('printoutPanel').innerHTML +=
        '<b>Map type id</b> <br>' + map.getMapTypeId() + '<br>';
    document.getElementById('printoutPanel').innerHTML +=
        '<b>Map zoom level</b> <br>' + map.getZoom() + '<br>';                
                        
                    
        */


    /*
    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { color: 'red' });
    map.entities.push(pushpin);     
             
     var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), 
     { icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
        anchor: new Microsoft.Maps.Point(50, 39) 
     });
    map.entities.push(pushpin);
     
     var base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAcBAMAAABmCgnjAAAAFVBMVEVHcEz///8aGhpsuy2s4oDRuPMaADiElDMGAAAAAXRSTlMAQObYZgAAAFNJREFUeF7FkLENgDAQA52GGiIxwD8bPBsgBmD/aXCs6JMNcpWtk1wYx8SO6gO2N3kWtDuJBc39UtYTPEc69BIpTVqLgjJOpS7tQ1I5NyiGia2rHyT7OTg7xhBoAAAAAElFTkSuQmCC';
      var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), 
     { icon: base64Image,
        anchor: new Microsoft.Maps.Point(60, 63) 
     });
    map.entities.push(pushpin);
     

     
     //var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><circle cx="25" cy="25" r="20" stroke="orange" stroke-width="4" fill="yellow" /></svg>',
        anchor: new Microsoft.Maps.Point(25, 25) });
    map.entities.push(pushpin);

    // //ARROR/  
     var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
        icon: createRedArrow(45),
        anchor: new Microsoft.Maps.Point(90, 63)
    });
    map.entities.push(pushpin);

    */
     //svg
     /*
     var locs = Microsoft.Maps.TestDataGenerator.getLocations(2, map.getBounds());
    //Create a blue circle that has a 25 pixel radius as a pushpin and add to map.
    var pushpin = createCirclePushpin(locs[0], 25, 'rgba(0, 0, 255, 0.5)');
    map.entities.push(pushpin);
    //Create a white circle that has a 35 pixel radius and a black outline as a pushpin and add to map.
    var pushpin2 = createCirclePushpin(locs[1], 35, 'rgba(255, 255, 255, 0.8)', 'black', 1);
     */
     //LABEL
     /*
     var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { text: 'A', title: 'Title', subTitle: 'Subtitle' });
    map.entities.push(pushpin);
     
     var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { icon: 'https://bingmapsisdk.blob.core.windows.net/isdksamples/defaultPushpin.png',
        anchor: new Microsoft.Maps.Point(12, 39) });
    map.entities.push(pushpin);

    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
        anchor: new Microsoft.Maps.Point(30, 65), text: 'X', textOffset: new Microsoft.Maps.Point(0, 5) });
    map.entities.push(pushpin);


    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
    map.entities.push(pushpin);
    pushpin.setOptions({ enableHoverStyle: true, enableClickedStyle: true });
    */
     
    /DELETE PUSHPINS/
    /*
    document.getElementById('printoutPanel').innerHTML =
        'Deleting pushpins in 2 seconds...';
    map.entities.push(Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds()));
    var updatePrintout = setTimeout(function () {
        for (var i = map.entities.getLength() - 1; i >= 0; i--) {
            var pushpin = map.entities.get(i);
            if (pushpin instanceof Microsoft.Maps.Pushpin) {
                map.entities.removeAt(i);
            }
        }
        document.getElementById('printoutPanel').innerHTML =
            'Pushpins removed.';
    }, 5000);
        */ 
     /DELETE PUSHPINS/
     
     
     polyline///
     var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {center: new Microsoft.Maps.Location(34.264186, 108.947242),});
    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { color: 'red' });
    map.entities.push(pushpin);    
     var center = map.getCenter();
    var polyline = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(center.latitude + 0.02, center.longitude - 0.08),
        new Microsoft.Maps.Location(center.latitude + 0.02, center.longitude),
        new Microsoft.Maps.Location(center.latitude - 0.02, center.longitude),
        new Microsoft.Maps.Location(center.latitude - 0.02, center.longitude + 0.08)], { strokeColor: 'green', strokeThickness: 3 });
    map.entities.push(polyline);
    document.getElementById('printoutPanel').innerHTML =
        'Setting polyline locations in 2 seconds...';
        /*
    var updatePrintout = setTimeout(function () {
        polyline.setLocations([new Microsoft.Maps.Location(center.latitude + 0.02, center.longitude - 0.08),
            new Microsoft.Maps.Location(center.latitude - 0.02, center.longitude),
            new Microsoft.Maps.Location(center.latitude + 0.02, center.longitude),
            new Microsoft.Maps.Location(center.latitude - 0.02, center.longitude + 0.08)]);
        document.getElementById('printoutPanel').innerHTML =
            'Locations of polyline set.';
    }, 2000);
    */
     
     
     //polygon/
     //var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
    var center = map.getCenter();
    var polygon = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(center.latitude - 0.05, center.longitude - 0.05),
        new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude - 0.05),
        new Microsoft.Maps.Location(center.latitude + 0.01, center.longitude + 0.05)], { fillColor: 'purple', strokeColor: 'red', strokeThickness: 2 });
    map.entities.push(polygon);
    document.getElementById('printoutPanel').innerHTML =
        'Setting polygon properties in 2 seconds...';
    var updatePrintout = setTimeout(function () {

        polygon.setOptions({ fillColor: 'gold', strokeColor: 'navy',
            strokeThickness: 3, strokeDashArray: [1, 2] });
            
                infobox.setMap(null);
                /*
                for (var i = map.entities.getLength() - 1; i >= 0; i--) {
                    var polyline = map.entities.get(i);
                    if (polyline instanceof Microsoft.Maps.Polyline) {
                        map.entities.removeAt(i);
                    }
                }
                */
        document.getElementById('printoutPanel').innerHTML =
            'Properties of polygon updated.';
    }, 4000);

     ///
     var infobox = new Microsoft.Maps.Infobox(center, { title: 'Map Center',
        description: 'XI\'AN'  
        , actions: [{ label: 'Handler1', eventHandler: function () {
                    alert('Handler1');
                }
            },
            { label: 'Handler2', eventHandler: function () {
                    alert('Handler2');
                }
            },
            { label: 'Handler3', eventHandler: function () {
                    alert('Handler3');
                }
            }] });
    infobox.setMap(map);
     
    var infoboxTemplate = '<div id="infoboxText" style="background-color:White; border-style:solid; border-width:medium; border-color:DarkOrange; min-height:100px; width: 240px; "><b id="infoboxTitle" style="position: absolute; top: 10px; left: 10px; width: 220px; ">{title}</b><a id="infoboxDescription" style="position: absolute; top: 30px; left: 10px; width: 220px; ">{description}</a></div>';
    var infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(center.latitude + 0.1, center.longitude), {
        htmlContent: infoboxTemplate.replace('{title}', 'myTitle').replace('{description}', 'myDescription')
    });
    infobox.setMap(map);

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {center: new Microsoft.Maps.Location(34.264186, 108.947242),});
    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { color: 'red' });
     
    var infobox = new Microsoft.Maps.Infobox(center, { title: 'Map Center',
        description: 'Wellcome to XI\'AN', visible: false });
    infobox.setMap(map);
    Microsoft.Maps.Events.addHandler(pushpin, 'click', function () {
        infobox.setOptions({ visible: true });
    });
    //map.entities.push(pushpin);

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        /* No need to set credentials if already passed in URL */
        center: new Microsoft.Maps.Location(47.60357, -122.32945) });
    var center = map.getCenter();
    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
    var infobox = new Microsoft.Maps.Infobox(center, { title: 'Map Center',
        description: 'Seattle', visible: false });
    infobox.setMap(map);
    Microsoft.Maps.Events.addHandler(pushpin, 'click', function () {
        infobox.setOptions({ visible: true });
    });
    map.entities.push(pushpin);

    var handel01=Microsoft.Maps.Events.addHandler(pushpin, 'click', function (args) { map.setView({ center: args.target.getLocation(), zoom: 15 }); });    
    var updatePrintout = setTimeout(function () {
        Microsoft.Maps.Events.invoke(pushpin, 'click', { target: pushpin });
        document.getElementById('printoutPanel').innerHTML = 'Pushpin click event invoked.';
         Microsoft.Maps.Events.removeHandler(handel01);
    }, 5000);

     }
     function createRedArrow(heading) {
        var c = document.createElement('canvas');
        c.width = 24;
        c.height = 24;
        var ctx = c.getContext('2d');
        // Offset the canvas such that we will rotate around the center of our arrow
        ctx.translate(c.width * 0.5, c.height * 0.5);
        // Rotate the canvas by the desired heading
        ctx.rotate(heading * Math.PI / 180);
        //Return the canvas offset back to it's original position
        ctx.translate(-c.width * 0.5, -c.height * 0.5);
        ctx.fillStyle = '#f00';
        // Draw a path in the shape of an arrow.
        ctx.beginPath();
        ctx.moveTo(12, 0);
        ctx.lineTo(5, 20);
        ctx.lineTo(12, 15);
        ctx.lineTo(19, 20);
        ctx.lineTo(12, 0);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        // Generate the base64 image URL from the canvas.
        return c.toDataURL();
    }


    function createCirclePushpin(location, radius, fillColor, strokeColor, strokeWidth) {
        strokeWidth = strokeWidth || 0;
        //Create an SVG string of a circle with the specified radius and color.
        var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2),
            '" height="', (radius * 2), '"><circle cx="', radius, '" cy="', radius, '" r="',
            (radius - strokeWidth), '" stroke="', strokeColor, '" stroke-width="', strokeWidth, '" fill="', fillColor, '"/></svg>'];
        //Create a pushpin from the SVG and anchor it to the center of the circle.
        return new Microsoft.Maps.Pushpin(location, {
            icon: svg.join(''),
            anchor: new Microsoft.Maps.Point(radius, radius)
        });
    }

    </script>
        </head>
        <body οnlοad='loadMapScenario();'> 
               <div id='printoutPanel'></div>
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            
        </body>
    </html>

    展开全文
  • bing Map 在vue项目中的使用

    千次阅读 2018-04-08 01:12:38
    写在最前面拥有全球数据库国内好像就只有百度地图有,高德、搜狗、腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap。bing Map 使用教程(基础)...

    写在最前面

    拥有全球数据库国内好像就只有百度地图有,高德、搜狗、腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap。

    bing Map 使用教程(基础)

    参考文档: bing Map 官方教程

    bing Map 初始化

    • 引入bing map资源
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]' async defer></script>
    
    • 初始化地图
    <div id="myMap"></div>
    
    <script type='text/javascript'>
      function GetMap()
      {
        var map = new Microsoft.Maps.Map('#myMap');
        //Add your post map load code here.
      }
    </script>
    
    • 设置地图控制参数

      • 常用控制参数
        • branch
          • 加载地图sdk的哪个分支:release(默认)、experimental
        • callback
          • 地图控制脚本加载完成后的回调(默认:GetMap)
        • key
          • 用户使用的userKey(详情
        • setLang
          • 指定用于地图标签和导航控件的语言
          • 常用:中国大陆(zh-CN)、中国香港(zh-HK)、简体中文(zh-Hans)、中国台湾(zh-TW)、英文-英国(en-GB)、英文-美国(en-US)
        • setMkt(详情
        • UR(详情
    • 给bing map添加地图事件(参考

      //  核心代码-demo
      Microsoft.Maps.Events.addHandler(你的地图名称, 触发地图事件名称, function() { 触发的事件 });
    
      // 常用实例
      //Add view change events to the map.
      // 视图更改事件
      Microsoft.Maps.Events.addHandler(map, 'viewchangestart', function () { highlight('mapViewChangeStart'); });
      Microsoft.Maps.Events.addHandler(map, 'viewchange', function () { highlight('mapViewChange'); });
      Microsoft.Maps.Events.addHandler(map, 'viewchangeend', function () { highlight('mapViewChangEnd'); });
    
      //Add mouse events to the map.
      // 鼠标事件
      Microsoft.Maps.Events.addHandler(map, 'click', function () { highlight('mapClick'); });
      Microsoft.Maps.Events.addHandler(map, 'dblclick', function () { highlight('mapDblClick'); });
      Microsoft.Maps.Events.addHandler(map, 'rightclick', function () { highlight('mapRightClick'); });
      Microsoft.Maps.Events.addHandler(map, 'mousedown', function () { highlight('mapMousedown'); });
      Microsoft.Maps.Events.addHandler(map, 'mouseout', function () { highlight('mapMouseout'); });
      Microsoft.Maps.Events.addHandler(map, 'mouseover', function () { highlight('mapMouseover'); });
      Microsoft.Maps.Events.addHandler(map, 'mouseup', function () { highlight('mapMouseup'); });
      Microsoft.Maps.Events.addHandler(map, 'mousewheel', function () { highlight('mapMousewheel'); });
    
      //Add addition map event handlers
      Microsoft.Maps.Events.addHandler(map, 'maptypechanged', function () { highlight('maptypechanged'); });
    

    bing Map 添加图钉(详情

    基本图钉示例

    function GetMap() {
      var map = new Microsoft.Maps.Map('#myMap', {
        credentials: 'Your Bing Maps Key',
        center: new Microsoft.Maps.Location(47.6149, -122.1941)
      });
    
      var center = map.getCenter();
    
      //Create custom Pushpin
      //  创建一个图钉
      var pin = new Microsoft.Maps.Pushpin(center, {
        // demo_1
        title: 'Microsoft', // 图钉的标题
        subTitle: 'City Center', // 图钉主体文字
        text: '1' // 图钉内的文字
        // demo_2
        color: 'red', // 纯色图钉
      });
    
      //Add the pushpin to the map
      map.entities.push(pin);
    }
    

    demo_1

    Pushpin_1.png

    demo_2

    Pushpin_2.png

    添加自定义图片图钉(详情

    function GetMap() {
      var map = new Microsoft.Maps.Map('#myMap',
      {
        credentials: 'You Bing Maps Key'
      });
    
      var center = map.getCenter();
    
      //Create custom Pushpin
      var pin = new Microsoft.Maps.Pushpin(center, {
        icon: 'images/poi_custom.png', // 自定义图片路径
        anchor: new Microsoft.Maps.Point(12, 39)
      });
    
      //Add the pushpin to the map
      map.entities.push(pin);
    }
    

    自定义图标的图钉

    Pushpin_3.png

    bing Map 给图钉添加事件

    • 核心代码
    //Create a pushpin.
      var pushpin = new Microsoft.Maps.Pushpin(map.getCenter());
      map.entities.push(pushpin);
    
      //Add mouse events to the pushpin.
      // 将自定义方法及鼠标事件添加到图钉上面
      Microsoft.Maps.Events.addHandler(pushpin, 'click', function () { highlight('pushpinClick'); });
      Microsoft.Maps.Events.addHandler(pushpin, 'mousedown', function () { highlight('pushpinMousedown'); });
      Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', function () { highlight('pushpinMouseout'); });
      Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', function () { highlight('pushpinMouseover'); });
      Microsoft.Maps.Events.addHandler(pushpin, 'mouseup', function () { highlight('pushpinMouseup'); });
    

    bing Map 给图钉添加hover样式

    其核心还是给bing Map的图钉添加事件,通过事件修改图钉的样式

    // demo
    var defaultColor = 'blue';
    var hoverColor = 'red';
    var mouseDownColor = 'purple';
    
    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
        color: defaultColor
    });
    
    map.entities.push(pin);
    
    Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e) {
        e.target.setOptions({ color: hoverColor });
    });
    
    Microsoft.Maps.Events.addHandler(pin, 'mousedown', function (e) {
        e.target.setOptions({ color: mouseDownColor });
    });
    
    Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e) {
        e.target.setOptions({ color: defaultColor });
    });
    

    给图钉添加hover样式

    Pushpin_4.jpeg

    bing Map 固定锚点

    开发人员在使用自定义图钉时遇到的最常见问题之一是,当他们缩放地图时,看起来好像他们的图钉正在漂移到或离开它所要锚定的位置。这是由于图钉选项中的锚点值不正确。锚点指定图像的哪个像素坐标相对于图像的左上角应与图钉位置坐标重叠。

    常见配置参考

    bing Map 在vue中使用

    vue引入bing Map可能会遇到的问题

    由于vue一般引用第三方插件是用import的方式进行的,所以的在html中使用script标签引入bing Map SDK会出现两种问题

    1.在控制台会报错:Mirosorft is not defined

    2.vue-cli会报错:Mirosorft is not defined

    这里的原因是由于异步加载,所以在调用"Mirosorft"的时候可能SDK并没有引用成功

    解决“Mirosorft is not defined”的错误

    文档参考

    解决“Mirosorft is not defined”的错误,只要在项目中保证调用地图之前,能够正确引入相关工具类就行了。

    // bing map init devTools
    export default {
      init: function (){
        console.log("初始化bing地图脚本...");
        // bing map key
        const bingUesrKey = '你的bingMap Key';
        const BingMap_URL = 'http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=' + bingUesrKey;
        return new Promise((resolve, reject) => {
          if(typeof Microsoft !== "undefined") {
            resolve(Microsoft);
            return true;
          }
    
          // 插入script脚本
          let scriptNode = document.createElement("script");
          scriptNode.setAttribute("type", "text/javascript");
          scriptNode.setAttribute("src", BingMap_URL);
          document.body.appendChild(scriptNode);
    
          // 等待页面加载完毕回调
          let timeout = 0;
          let interval = setInterval(() => {
            // 超时10秒加载失败
            if(timeout >= 20) {
              reject();
              clearInterval(interval);
              console.error("bing地图脚本初始化失败...");
            }
            // 加载成功
            if(typeof Microsoft !== "undefined") {
              resolve(Microsoft);
              clearInterval(interval);
              console.log("bing地图脚本初始化成功...");
            }
            timeout += 1;
          }, 500);
        });
      }
    }  
    
    // bing map vue
    import bingMap from './**/bing-map';
    bingMap.init()
      .then((Microsoft) => {
          console.log(Microsoft)
          console.log("加载成功...")
          // 开始地图操作
      })
    

    集成bing Map组件到vue中

    需要达到的功能

    • 在vue项目中成功加载bing Map (完成)
    • 当点击bing Map的时候,返回点击点的经纬度 (完成)
      • 子组件触发事件返回参数到父组件
    • 当已有经纬度的时候,加载bingMap自动显示其经纬度所在的位置并设置图钉 (待完成)

    子组件触发事件返回参数到父组件

    // 子组件
    <template>
    <div @click="iclick"></div>
    </template>
    methods:{
      iclick(){
        let data = {
          a:'data'
        };
        this.$emit('ievent', data1, 'data2Str');
      }
    }
    // 父组件
    <i-template @ievent = "ievent"></i-template>
    methods:{
      ievent(...data){
        console.log('allData:',data); // data为包含传过来所有数据的数组,第一个元素是对象,第二个元素是字符串
      }
    }
    

    封装bing Map通用组件

    // 核心代码
    <template>
      <div class="map-container">
        <div id="localMap"></div>
      </div>
    </template>
    
    <script>
    
    import initBingMap from './initMap.js'
    
    export default {
      data () {
        return {
          lngNum: null, // 经度
          latNum: null, // 纬度
        }
      },
      created: function () { 
        let _this = this;
        initBingMap.init()
        .then((Microsoft) => {
          console.log(Microsoft)
          console.log("加载成功...")
          _this.initMap();
        })
      },
      methods: {
        initMap () {
          let _this = this;
          let map = new Microsoft.Maps.Map('#localMap', {
            credentials: 'AgzeobkGvmpdZTFuGa7_6gkaHH7CXHKsFiTQlBvi55x-QLZLh1rSjhd1Da9bfPhD'
          });
          Microsoft.Maps.Events.addHandler(map, 'click', _this.getClickLocation);
        },
        getClickLocation (e) {
          //若点击到地图的标记上,而非地图上
          let [_this, loc] = [this, null];
          if (e.targetType == 'pushpin') {
            loc = e.target.getLocation();
          }
          //若点击到地图上
          else {
            var point = new Microsoft.Maps.Point(e.pageX, e.pageY);
            loc = e.target.tryPixelToLocation(point, Microsoft.Maps.PixelReference.page);
          }
          console.log(loc.latitude+", "+loc.longitude);
          console.log(loc);
          _this.lngNum = loc.longitude;
          _this.latNum = loc.latitude;
          let data = {
            lngNum: _this.lngNum,
            latNum: _this.latNum
          }
          this.$emit('getLocationNums',data);
        },
      }
    }
    </script>
    
    <style scoped>
      .map-container {
        width: 100%;
        height: 400px;
        border: 1px solid #000;
      }
    </style>
    

    在组件中调用bing Map通用组件

    // 引入bingMap
    import bingMapsLayer from 'bingMap.vue'
    
    // component中定义
    components: {
      bingMapsLayer
    },
    
    // template中使用
    <bing-maps-layer @getLocationNums="getLocationNums"></bing-maps-layer>
    
    // 定义触发点击标记返回经纬度的事件函数
    getLocationNums (...data) {
      let _this = this;
      console.log('click');
      console.log(data);
      // 这里的data中即子组件bingMap返回的点击获取的经纬度值
    },
    

    未完待续

    后续

    • 在bingMap组件中使用自定义图钉
    • 在bingMap组件中定义可拖动图钉标记经纬度
    • 集成bingMap自定义搜索
    • 集成bingMap图钉详情展示

    BY - Luca_LJX
    github: luca_ljx

    展开全文
  • BingMap(必应地图)学习一

    千次阅读 2020-07-17 17:39:40
    http://www.bingmap.cn/guide/db765008-dafe-11e8-a995-d46d6d978bfa?module=doc 申请完毕,查看密钥 案例/API http://www.bingmap.cn/demos/cd768d14-dafe-11e8-a8da-d46d6d978bfa?module=demo ...

    密钥申请

    案例/API

    隐藏logo/地图信息

    在这里插入图片描述

    	<style type='text/css'>
            .bm_bottomLeftOverlay{
                display: none!important;
                visibility: hide!important;
            }
        </style>
    

    自己做了个小案例

    <!DOCTYPE html>
    <html>
    
    <head>
        <title>sdsloadmultipleboundariesHTML</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <style type='text/css'>
            body {
                margin: 0;
                padding: 0;
                overflow: hidden;
                font-family: 'Segoe UI', Helvetica, Arial, Sans-Serif;
            }
    
            #myMap {
                width: 100%;
                height: 100%;
                float: left;
            }
    
            .bm_bottomLeftOverlay{
                display: none!important;
                visibility: hide!important;
            }
        </style>
    </head>
    
    <body>
    <div id='myMap'></div>
    <script type='text/javascript'>
        var h = [30.320730,30.203730,30.20730,30.320730];
        var s = [120.106659,120.100659,120.000659,120.006659];
        var infobox,tooltip;
        var htmltext = '<div style="border:0px;padding:3px;border-radius:10px;border:1px solid #00F;display:inline-block;height:1%;width:90px; color: rgb(255, 255, 255); background: rgb(200, 118, 145);">{title}</div>';
        function loadMapScenario() {
            var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                /* 如果已经在URL中传递,则无需设置凭据 */
                zoom: 10,
                center: new Microsoft.Maps.Location(30.320730, 120.106659)
            });
            //创建位置数组以获得边界
            var places = ['余杭区', '西湖区', '上城区', '江干区','拱墅区','下城区','滨江区','萧山区'];
            // • AdminDivision1:国家/地区级别的第一个行政级别,例如州或省。
            // • AdminDivision2:国家/地区级别的第二个行政级别,例如县。
            // • CountryRegion:国家或地区。
            // • Neighborhood:人口稠密的地方的一部分,通常是众所周知的地方,但边界模糊。
            // • PopulatedPlace:人类居住的集中区域,如城市,城镇或村庄。
            // • Postcode1:最小的邮政编码类别,例如zip code。 (大概是国际邮政编码之类的)
            // • Postcode2:Postcode1之后的下一个最大邮政编码类别,它是通过聚合Postcode1区域创建的。
            // • Postcode3:通过聚合Postcode2区域创建的Postcode2之后的下一个最大邮政编码类别。
            // • Postcode4:通过聚合Postcode3区域创建的Postcode3之后的下一个最大邮政编码类别。
            var geoDataRequestOptions = {
                entityType: 'PopulatedPlace',//人类居住的集中区域,如城市,城镇或村庄。
                getAllPolygons: true
            };
            Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
                //使用GeoData API管理器获取边界
                Microsoft.Maps.SpatialDataService.GeoDataAPIManager.getBoundary(places, geoDataRequestOptions,
                    map,
                    function (data) {
                        if (data.results && data.results.length > 0) {
                            var poly = data.results[0].Polygons[0];
                            map.entities.push(poly);
                            //设置事件
                            Microsoft.Maps.Events.addHandler(poly, 'mouseover', PolygonsMouseover);
                            Microsoft.Maps.Events.addHandler(poly, 'mouseout', PolygonsMouseout);
                            Microsoft.Maps.Events.addHandler(poly, 'click', PolygonsClick);
                        }
                    },
                    function errCallback(callbackState, networkStatus, statusMessage) {
                        console.log(callbackState);
                        console.log(networkStatus);
                        console.log(statusMessage);
                    });
            });
            //鼠标悬停在多边形上触发
            function PolygonsMouseover(e) {
                e.target.setOptions({fillColor: 'rgba(255, 20, 147, 0.4)', strokeColor: 'rgba(0, 100, 200, 1)',
                    strokeThickness: 1 });
            }
            //鼠标移除多边形覆盖区域时触发
            function PolygonsMouseout(e) {
                e.target.setOptions({fillColor: "rgba(90, 255, 150, 0.4)", strokeColor: "rgba(0, 100, 200, 1)",
                    strokeThickness: 1 });
            }
            //鼠标点击覆盖区域
            function PolygonsClick(e) {
                //视图定位设置
                map.setView({center : e.location , zoom : 12});
                zoomMap();
            }
            //完成地图视图更新后,触发该事件。 当视图没变,但视图帧发生变化时也会触发该事件。
            Microsoft.Maps.Events.addHandler(map, 'viewchangeend', zoomMap);
    
            //视图变化监控
            function zoomMap(){
                //区域折线覆盖物显示隐藏
                var poly_arr = map.entities._primitives;
                for (var i = 0; i < poly_arr.length; i++) {
                    var poly_objeck = poly_arr[i];
                    if(map.getZoom() > 11){
                        if(poly_objeck.geometryType == 1){
                            poly_objeck.setOptions({visible:true});
                            // var lat = new Microsoft.Maps.Location(poly_objeck.geometry.y, poly_objeck.geometry.x);
                            // //提示信息初始化
                            // tooltip = new Microsoft.Maps.Infobox(lat, {
                            //     showPointer: false,
                            //     showCloseButton: false,
                            //     offset: new Microsoft.Maps.Point(-55, 15),
                            //     htmlContent: htmltext.replace('{title}', "酒店"+(i+1)),
                            //     visible: true
                            // });
                            // tooltip.setMap(map);
                        }else if(poly_objeck.geometryType == 3){
                            poly_objeck.setOptions({visible:false});
                        }
                    }else{
                        if(poly_objeck.geometryType == 1){
                            poly_objeck.setOptions({visible:false});
                        }else if(poly_objeck.geometryType == 3){
                            poly_objeck.setOptions({visible:true});
                        }
                    }
                }
            }
            //信息窗口初始化
            infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
                visible: false
            });
            infobox.setMap(map);
            //标记
            for (var i = 0; i < h.length; i++) {
                var Location = new Microsoft.Maps.Location(h[i], s[i]);
                //标记初始化
                var pin = new Microsoft.Maps.Pushpin(Location);
                // {title : "我是地址"+i,subTitle: 'City Center',text: ''+i}
                // 设置标记信息
                pin.metadata = {
                    title: '小保健 ' + (i + 1),
                    description: 'Discription' + (i + 1),
                    visible: true
                };
                // 给标记设置点击事件触发函数显示对应窗口信息
                Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
    
                //鼠标停留在点标记上时,触发该事件
                Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e) {
                    e.target.setOptions({color: 'red'});
                });
                //鼠标悬停在点标记上方,并单击鼠标左键时,触发该事件。
                Microsoft.Maps.Events.addHandler(pin, 'mousedown', function (e) {
                    e.target.setOptions({color: 'blue'});
                });
                //当鼠标移除点标记覆盖区域时,触发该事件
                Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e) {
                    e.target.setOptions({color: 'purple'});
                });
                //添加标记
                map.entities.push(pin);
            }
            //信息窗口
            function pushpinClicked(e) {
                console.log(e);
                if (e.target.metadata) {
                    infobox.setOptions({
                        location: e.target.getLocation(),
                        title: e.target.metadata.title,
                        description: e.target.metadata.description,
                        visible: true//显示
                    });
                }
            }
            console.log(map);
            console.log(map.entities._primitives);
            // //路线
            // Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
            //     //Create an instance of the directions manager.
            //     directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
            //     // //Create waypoints to route between.
            //     // var seattleWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'hangzhou' , location: new Microsoft.Maps.Location(h[2], s[2]) });
            //     // directionsManager.addWaypoint(seattleWaypoint);
            //     // var workWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: 'shanghai' , location: new Microsoft.Maps.Location(h[3], s[3])});
            //     // directionsManager.addWaypoint(workWaypoint);
            //     //创建两点之间的路线。
            //     var seattleWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: '余杭区' });
            //     directionsManager.addWaypoint(seattleWaypoint);
            //     var workWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: '上城区' });
            //     directionsManager.addWaypoint(workWaypoint);
            //
            //     //将事件处理程序添加到路线管理器。
            //     // Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', directionsError);
            //     Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', directionsUpdated);
            //
            //     directionsManager.calculateDirections();
            // });
            // function directionsUpdated(e) {
            //     //获取当前路线索引。
            //     var routeIdx = directionsManager.getRequestOptions().routeIndex;
            //     //获取路线距离,四舍五入到小数点后两位。
            //     var distance = Math.round(e.routeSummary[routeIdx].distance * 100)/100;
            //     //获取用于计算路线的距离单位。
            //     var units = directionsManager.getRequestOptions().distanceUnit;
            //     var distanceUnits = '';
            //     if (units == Microsoft.Maps.Directions.DistanceUnit.km) {
            //         distanceUnits = 'km'
            //     } else {
            //         //必须以英里为单位
            //         distanceUnits = 'miles'
            //     }
            //     //时间以秒为单位,转换为分钟并四舍五入。
            //     var time = Math.round(e.routeSummary[routeIdx].timeWithTraffic / 60);
            //     console.log('Distance: ' + distance + ' ' + distanceUnits + '   Time with Traffic: ' + time + ' minutes');
            // }
        }
    </script>
    <script type='text/javascript'
            src='https://www.bing.com/api/maps/mapcontrol?key=AkPqQjrEeSNHwv78SOc9gpDoPLIVylos653GaNqCFN_DHv_RwvLMmeOtRbrfUoAZ&callback=loadMapScenario&mkt=zh-cn&setlang=zh-cn' async
            defer></script>
    </body>
    
    </html>
    
    
    

    在这里插入图片描述

    有些不能搞的功能,可以试试这个思路,多个地图嵌套在一个页面里
    感谢观看
    展开全文
  • 创建bing map帐号

    2019-08-07 13:16:29
    按如下方式创建bing map 帐号 登录Bing Maps 开发中心https://www.bingmapsportal.com/. 可以用微软帐号或新建帐户 seeUpdating Your Bing Maps Account. 登录后填写必要信息 在我的帐号下选择...
  • 1. 项目需求 给定一组地点的英文名称,将其解析为经纬度坐标值并在地图中展示。 2. 项目实现 2.1. 地点名称的解析 结构化地址和经纬度之间的相互转化,即被称为 geocode ...Bing Map:微软家地图API,总免费上限12W次
  • BingMap的使用

    2018-12-22 16:44:56
     src='https://www.bing.com/api/maps/mapcontrol?key=AvfgntqoiU4NADAHQajrTZODiPAhoh5KCtFmdgX4y8npxuqZ0ssxwp76mhjYx1Dg&mkt=zh-cn&setlang=zh-cn'></script>  $(function() {  });  var map, infobox;  /...
  • 在vue中打开bingmap

    2019-10-06 17:05:11
    使用bingMap需要使用一个key 注册BingMapkey 下面是我注册的 At0AC5clqqASpeFYI62kMtfRYAlAWKodmuMnyQj9ZzR-F_qHEMeIQALDng0tH7ML 核心代码: import bingMap from 'ol/source/BingMaps' const bingMapKey = ...
  • Android地图开发-BingMap基础教程

    千次阅读 2018-02-13 17:51:49
    原文请参考:http://blog.csdn.net/mad1989/article/details/9733133开端本文皆在指引大家在自己的项目里嵌入BingMap,并可以在地图上添加覆盖物、折线等常用地图功能。1.1 SDK 和API...
  • 这是我从微软window phone官网下载下来的,提供的是如何使用bing map的sample实例
  • bingMap的使用小结

    万次阅读 2016-01-17 14:56:06
    其实在国外有google,在国内有百度,怎么着应该都轮不到研究bing地图,但是现在的问题是,我需要在国内使用世界地图,如果要用google地图,就必须翻墙使用,这就造成了访问瓶颈,而百度地图又不提供世界地图。...
  • Pin Clusterer是一个JavaScript层,在Bing Map上将闭合的图钉分组在一起。 有关实时演示和文档,请查看的产品页面。 = = = 执照
  • 使用Silverlight Bing Map 加载Google Map,开发环境为vs2010,改程序通过本人测试,可以使用
  • 底图切换 - mapbox切换高德、天地图、bingmap等底图
  • 全面的对GoogleMap和BingMap 的地图API进行分析,如果是做地图开发或做自己的GIS平台,应该是有帮助的
  • BingMap key终是开始限制严格了

    千次阅读 2015-10-16 16:00:43
    2015年十一,BingMap终是修改了BingMap key的授权,开始进行严格的限制了,之前的有关key的文档也说过key的限制问题,不过数量上的限制始终没有真正的实施,之前的策略是申请了BingMap的Public website类型的key,...
  • BingMap

    2015-11-27 01:36:00
    Application name Key details BngMapTest ...https://rbrundritt.wordpress.com/2013/02/13/3d-elevation-models-with-bing-maps-wpf/ 转载于:https://www.cnblogs.com/suriyel/p/4999505.html
  • BingMapNodeJS 使用node.js做后端,暴露一些rest api路由,例如/travelduration,然后使用bing map api获取实时路况信息和行程时间
  • 2、申请BingMapKey: https://www.bingmapsportal.com/   对Cesium文件夹下面的Cesium.js进行修改,通过ctrl+f 搜索“This application”找到之后将defaultKey修改为自己的key值,将下面getkey的函数返回值修改为...
  • Android地图开发之BingMap基础教程

    千次阅读 2013-08-03 16:53:19
    【注意】由于BingMap此类教程在国内不太多,本文是本人花费多日通过一些国外网站论坛总结所得,如要转载,请保留文章出处,尊重一下作者,谢谢。 开端 本文皆在指引大家在自己的项目里嵌入BingMap,并可以在地图上...
  • bing中通过第一种方式加载bing地图 3.google的包装设计 先看几个样类: GeoPoint类 public class GeoPoint implements IGeoPoint { private final com.google.android.maps.GeoPoint ...
  • 基本代码完成后,我们看到googleMap(以后简称gm)和bingMap(以后简称mm)默认有缩放都控制器,baiduMpa(以后简称bm)没有带,现在为bm加上控制器 [javascript] view plaincopy  function ...
  • BingMap地图显示中文

    千次阅读 2015-08-19 10:03:31
    bingMap的js引用 http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=zh-cn">> mkt=en-us:英文显示【默认选项】 mkt=zh-cn:中文显示 在BingMap的官网地图上我还真没有找到设置显示中文的选项...
  • 1、下载WPF Bingmap 控件 网址:http://www.microsoft.com/en-us/download/details.aspx?id=27165 2、申请 开发者 Key 从这申请 :http://www.bingmapsportal.com/ 3、安装WPF BingMaps 控件。 开始: 1、新建...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,928
精华内容 3,571
关键字:

bing map