zoukankan      html  css  js  c++  java
  • 百度地图添加标注,并获取标注的经纬度

    1.功能介绍:地图刚加载完的时候显示一个默认的范围,本例子显示的是河南省,右键点击,删除地图上所有的标注并添加标注,并获取新标注的经纬度,也可以通过搜索地址,查询大概范围。(详情看代码中的注释)

     

    <h2>Index</h2>
    <!--百度地图显示的地方-->
    <div style=" 697px; height: 462px;" id="container">
    </div>
    <!--百度地图显示的地方-->
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    
    <script type="text/javascript">
        var map = new BMap.Map("container");//在指定的容器内创建地图实例
        map.setDefaultCursor("crosshair");//设置地图默认的鼠标指针样式
        map.enableScrollWheelZoom();//启用滚轮放大缩小,默认禁用。
        //根据经纬度选择默认范围
        //map.centerAndZoom(new BMap.Point(116.124878, 24.309178), 13);
        map.centerAndZoom("河南省", 8);//默认地图的显示范围
        map.addControl(new BMap.NavigationControl());
    
        map.addEventListener("rightclick", function (e) {//地图右键单击事件,左键为click
            map.clearOverlays();//添加标注前清空以前的所有标注
            document.getElementById("txtjingweidu").value = e.point.lng + ", " + e.point.lat;
    
            var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));        // 创建标注     
            map.addOverlay(marker);
        });
    
        function sear(result) {//根据地质搜索范围
            var local = new BMap.LocalSearch(map, {
                renderOptions: { map: map }
            });
            local.search(result);
        }
    </script>
    <input id="txtAddress" type="text" />
    <input id="butSearch" type="button" onclick="sear(document.getElementById('txtAddress').value)" value="搜索"/>
    经纬度:
    <input id="txtjingweidu" type="text" />
  • 相关阅读:
    未进入Kali Linux系统修改修改密码的方法
    SQL 修改字段名,数据类型,增加字段
    在 SAE 上部署 ThinkPHP 5.0 RC4
    在 C# 里使用 F# 的 option 变量
    Retinex图像增强和暗通道去雾的关系及其在hdr色调恢复上的应用
    暗通道去雾算法的python实现
    解析hdr图像文件的python实现
    博客说明
    retinex图像增强算法的研究
    我知道的JavaScript设计模式(桥接)应用之验证器
  • 原文地址:https://www.cnblogs.com/heluo/p/3366868.html
Copyright © 2011-2022 走看看