Echarts 显示百度地图的用法(2)

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vgQfNjTQDlCar24CrTIdWcwY"></script>
<div id="allmap" style="height: 600px"></div><br/>
<span id="lng"></span>
<span id="lat"></span>
<script  type="text/javascript">
<script  type="text/javascript">
    $(function() {
        //==========隔1500秒调整视野到"上海"===========
        //GetMapByChina();

        //==========根据经纬度加载地图===============
        //var pointX = "31.035434";
        //var pointY = "121.248119";
        //var address = "松江国际生态商务区光星路1688号(松江万达广场旁)";
        //var buildName = "新江湾首府";
        //GetMapByPoint(pointX, pointY, address, buildName);

        //===========根据项目地址获取地图信息
        //GetMapByAddress("长宁区延安西路1160号","上海","首信银都");

        //===========可拖拽地图显示坐标======
        var pointX = "31.035434";
        var pointY = "121.248119";
        setLocation(pointX, pointY);
    });

    //==========隔1500秒调整视野到"上海"===========
    var map = new window.BMap.Map("allmap");
    function GetMapByChina() {
        //百度地图API功能

        map.centerAndZoom(new window.BMap.Point(116.403765, 39.914850), 7);
        map.enableScrollWheelZoom();

        setTimeout(function() {
            getBoundary();
        }, 1500);

        function getBoundary() {
            var bdary = new window.BMap.Boundary();
            bdary.get("上海", function(rs) { //获取行政区域
                map.clearOverlays(); //清除地图覆盖物
                var count = rs.boundaries.length; //行政区域的点有多少个
                for (var i = 0; i < count; i++) {
                    var ply = new window.BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
                    map.addOverlay(ply); //添加覆盖物
                    map.setViewport(ply.getPath());
                    alert(map.point.layerX());
                }
            });
        }
    }

    //============根据经纬度加载地图==============
    function GetMapByPoint(pointX, pointY, address, buildName) {
        //lat 经度 lng 纬度 address 项目地址 name  项目名称
        var point = new window.BMap.Point(pointY, pointX, address, buildName);
        SetContent(point, address, name);
    }

    //根据项目地址获取地图信息
    function GetMapByAddress(address, city, name) {
        // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(address, function(point) {
            if (point) {
                SetContent(point, address, name);
            }
        }, city);
    }

    function SetContent(point, address, name) {
        var map = new BMap.Map("allmap");
        var marker = new BMap.Marker(point, { enableDragging: true, }); //enableDragging 标注物可拖拽
        map.addOverlay(marker);
        //经度
        alert("经度:" + point.lat);
        //纬度
        alert("纬度:" + point.lng);
        var opts = {
            width: 200,     // 信息窗口宽度
            height: 60,     // 信息窗口高度
            title: name, // 信息窗口标题
            enableMessage: false,//设置允许信息窗发送短息
            //message: "您好,请点击下面的链接查看地图"
        };

        var infoWindow = new BMap.InfoWindow("地址:" + address, opts); // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point);
        map.centerAndZoom(point, 15);
        SetMarkerEvent(marker, infoWindow); //添加标注拖拽事件
        map.enableScrollWheelZoom(true); //启动地图拖拽功能
        map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, })); //右上角添加添加默认缩放平移控件
    }

    //经纬度显示,拖拽后显示经纬度
    function setLocation(x, y) {//参数:经纬度
        map.clearOverlays();
        var point = new window.BMap.Point(x, y);
        map.centerAndZoom(point, 7);
        var marker = new window.BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        marker.enableDragging();    //可拖拽
        $("#lng").val(point.lng);
        $("#lat").val(point.lat);
        map.enableScrollWheelZoom();
        marker.addEventListener(‘dragend‘, getlngAndlat);
        //拖拽时调用的方法
        function getlngAndlat(e) {
            if (e.point.lng != null) {
                $("#lng").val(e.point.lng);
                $("#lat").val(e.point.lat);
                alert("拖拽后的坐标经度:" + e.point.lng);
                alert("拖拽后的坐标纬度:" + e.point.lat);
            }
        }
        map.addOverlay(marker);
    }
</script>

</script>
时间: 2024-11-09 19:03:03

Echarts 显示百度地图的用法(2)的相关文章

Winform Echarts 显示百度地图的用法(3)

1,用Echarts 显示百度地图的用法(2)写一个 baidu.html 2,winform页面放一个WebBrowser控件,用来放地图的html页面 3,winform 加载时 将WebBrowser文件放在baidu.html同一个目录下 webBrw_Map.Url = new Uri(Path.Combine(Application.StartupPath, "baidumap.html")); 4,加载地图 (1),根据经纬度查询 var pointX = "3

Echarts 显示百度地图的用法

<div id="allmap" style="height: 1000px"></div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vgQfNjTQDlCar24CrTIdWcwY"></script> <script type="text/jav

隐藏后重新显示 百度地图 ,地图显示不完整,只显示左上角一小部分

问题描述:我一个DIV1里,放了一个显示百度地图的mapDiv. 问题出现 了, 当初始化(第一次显示DIV1)时 ,可以 正常显示 地图, 当隐藏后 再 显示 时, 地图就 出错了,地图显示不完整,只显示左上角一小部分. jsp代码: <!-- 显示地图,获取经纬度    start --> <div id="mapModel" class="modal  fade " tabindex="-1" role="dia

Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图

标签: Android百度地图API Key  分类: Android 百度地图开发(2)  最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不多,本篇文章就带领大家在自己的Android项目中加入百度地图的功能,接下来我会写一系列关于百度地图的文章,欢迎大家到时候关注!   一 申请API key 在使用百度地图之前,我们必须去申请一个百度地图的API key,申请地址http://lbsyun.baidu.com/a

Echarts 结合百度地图使用总结

注:echarts结合china.js使用效果并不好,china.js是矢量图,显示的地图只有一个轮廓,所以正常会选择百度地图或者其他地图配合使用. 一.代码如下(参考网上,并加入自己的整理) function initHotMap(dataArr, domId, title){ $.get("${ctxStatic}/resources/js/bmap/dataTool.js",function(){ $.get('${ctxStatic}/resources/js/bmap/bma

C#显示百度地图API

http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&2_0#2&0 太原市的经纬度:112.596, 37.884 北京市的经纬度:116.404, 39.915 // JScript 文件代码示例http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&7_8#7&8 /************************地图初始化时,添加了十个自定义标注图标

Android_百度地图基本用法3

1 /* 2 *1.实现定位 3 *2.引入方向传感器 4 *3.自定义位置图标 5 * */ 6 public class MainActivity extends Activity { 7 MapView mapView; 8 BaiduMap mBaiduMap; 9 // 定位相关 10 private LocationClient mLocationClient; 11 private MyLocationListener mLocationListener; 12 private b

网页显示百度地图 Jquery

cshtml: <div class="modal" style="visibility: hidden"> <div id="map"></div> </div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6713c5e605ec1fdcfbe108

百度地图API用法(传地址)

网上找了很多都是没用的,非动态用法,最后在官网论坛才问到的 现在来一步一步教大家用 1 这是地址:   http://developer.baidu.com/map/ 选择web开发 先获取密钥   这个是免费的,按他的注册来,一步一步 注册完了之后就到了这里 然后点击创建应用,  随便勾选, 这个访问应用,就是你的密钥了,免费的,下面用的上 进入获取代码的页面 点击 示迾DEMO 关键的地方来了,我们要找的是这个 “ 检索示迾” 这样代码就出来了,好了我们就可以将代码中的东西动态的替换我们的东