前端百度地图开发使用总结

摘要:
按需复制<divi=“map”>v=2.0&Ak=your Ak key“>//将封面添加到map}functioncreateMap(){map=newBMap.map(“map”);function(){target.openInfoWindow(window);true});map.addControl(overviewControl);/script>

1、打开百度地图开发网站http://lbsyun.baidu.com/

2、创建应用、选浏览器端,白名单可选*,获得ak密钥

前端百度地图开发使用总结第1张

 3、进入开发文档里的生成器,按需设置坐标等

前端百度地图开发使用总结第2张

4、复制以下代码,建议去百度生成地图里设置自己的需求,按需复制

    <div   id="map"></div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak密钥">
    </script>
    <script type="text/javascript">
        //创建和初始化地图函数:
        function initMap() {
            createMap(); //创建地图
            setMapEvent(); //设置地图事件
            addMapControl(); //向地图添加控件
            addMapOverlay(); //向地图添加覆盖物
        }

        function createMap() {
            map = new BMap.Map("map");
            map.centerAndZoom(new BMap.Point(119.069098, 32.005961), 11); //你的位置坐标
        }

        function setMapEvent() {
            map.enableScrollWheelZoom();
            map.enableKeyboard();
            map.enableDragging();
            map.enableDoubleClickZoom()
        }

        function addClickHandler(target, window) {
            target.addEventListener("click", function () {
                target.openInfoWindow(window);
            });
        }

        function addMapOverlay() {}
        //向地图添加控件
        function addMapControl() {
            var scaleControl = new BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
            map.addControl(scaleControl);
            var navControl = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(navControl);
            var overviewControl = new BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: true
            });
            map.addControl(overviewControl);
        }
        var map;
        initMap();
    </script>

免责声明:文章转载自《前端百度地图开发使用总结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Ubuntu 16.04/16.10安装 KDE Plasmaalgorand:可扩展的拜占庭协议下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

百度地图API初体验和偏移纠正方法

      最近的项目想做一个在可以通过手持设备获取经纬度,然后在地图上进行标注显示的功能,因为还在技术调研阶段,所以决定先使用百度地图或Google Maps的API来做Demo。通过网上的一些资料和自己对于Google和百度地图的使用,对这两个地图做了一些简单的对比,结论是很明显的——Google在技术水平和成熟度上都要比百度高很多,可以说完全不在一个...

union 中null值合并原理

正常情况下null<>null 的,但是在union中如果有两个null值,那么只会显示一个。 1.null<>null  下例中可以看出null<>null SQL>  select * from dual; DU--X SQL> select * from dual where null=null; 未选...

Vue中开启关闭风场

<template> <div class="box"> <div ref="emap" id="map"></div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class...

scheme中表只能操作头部带来的一个问题

很多简单的算法,为了能够转成尾递归,不得不采取比较繁琐的计算过程,或者使用多遍的遍历过程。在scheme中,比如map的实现,按照定义的实现 (define (map p l)   (if (null? l)        '()       (cons (p (car l)) (map p (cdr l))))) 是一个普通的递归,无法转成迭代进行计算。...

Spring RestTemplate简介及使用

Spring RestTemplate介绍 1、springRestTemplate 简介 spring 提供的同步请求Rest服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效率。 是Spring用于同步client端的核心类,简化了与http服务的通信,并满足RestFul原则,程序代码可以给它提...

js中实现高德地图坐标经纬度转百度地图坐标

1 function tobdMap(x, y) { 2 var x_pi = 3.14159265358979324 * 3000.0 / 180.0; 3 var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi); 4...