这一篇我将跟大家分享一下我自己在开发过程中总结出的一些操作地图的方法,属性,及思路,希望可以让大家少走弯路。

1.定位

一般百度的示例DEMO里开始初始化地图时用的都是map.centerAndZoom(坐标,放大级数);其中坐标可以用点代替,也可用字符串代替,而放大级数必须是整数,比如:

var p1=new BMap.Point(108.961605,34.238296);//西安坐标

map.centerAndZoom(p1,15);//或者map.centerAndZoom("西安",15);

但是必须要注意一点,这个点绝对是要用百度的API去实例化,即必须用BMap.Point(经度,纬度)去创造一个点,我在这点上吃了很多苦,有一次直接建立了一个坐标数组就在那读,死活没调通。

如果要重新定位,我建议大家不要在用centerAndZoom了,可以这样:

map.setCenter(“西安");

map.setZoom(15);

2.添加标注(Marker)

添加标注的最基本条件就是添加点坐标,示例如下:

首先必须要加载地图(所有的操作都是在这个的基础上进行的)

var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(108.961605,34.238296), 14);
var marker1 = new BMap.Marker(new BMap.Point(108.961605,34.238296));  // 创建标注
map.addOverlay(marker1);              // 将标注添加到地图中

若要给标注添加信息框,则继续下面的代码:

var infoWindow1 = new BMap.InfoWindow("普通标注");
//给mark添加鼠标单击事件
marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});

百度默认的标注是个红色气球,可以给它换图标:

var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("./png.gif", new BMap.Size(300,157));//自己要添加的路径
var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
map.addOverlay(marker2);              // 将标注添加到地图中

最后为信息框加入点击鼠标事件:

var infoWindow2 = new BMap.InfoWindow("<p style='font-size:14px;'>哈哈,你看见我啦!我可不常出现哦!</p><p style='font-size:14px;'>赶快查看源代码,看看我是如何添加上来的!</p>");
marker2.addEventListener("click", function(){this.openInfoWindow(infoWindow2);});

3.画线

下面是百度的一个小DEMO:

<script type="text/JavaScript">
var map = new BMap.Map("allmap");
map.centerAndZoom("重庆",12);                   // 初始化地图,设置城市和地图级别。
var pointA = new BMap.Point(106.486654,29.490295);  // 创建点坐标A--大渡口区
var pointB = new BMap.Point(106.581515,29.615467);  // 创建点坐标B--江北区
alert('从大渡口区到江北区的距离是:'+map.getDistance(pointA,pointB)+' 米。');//获取2点距离
var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线
map.addOverlay(polyline);   //添加折线到地图上
</script>

从以上代码中可以得到两个重要的信息:

(1)  map.getDistance(点1,点2);这个函数可以很好的帮助我们算两点的距离,不用自己计算,很方便。

(2)  Ployline函数可以帮助我们划线,在这里不难看出它需要的第一个参数是一个点数组,所以在实际项目中可以将数据先放在数组里,然后在传数组名给它即可(注意一定要实例化,即BMap.Point());所以可以利用它来画矩形,多边形等等。。

4.地址解析

function BMap_Geo(detail_address,city)
{
   var myGeo=new BMap.Geocoder();
   myGeo.getPoint(detai_address,
   function(point)
  {
   if(point)
   {
      map.panTo(point);
      map.addOverlay(new BMap.Marker(point));   
   } 
  },city)   
}

5.鼠标实时获取坐标

function GetlngAndlat(e)
{if(e.point.lng!=null)
 {
  document.getElementById("mouselng").innerHTML=e.point.lng;
  document.getElementById("mouselat").innerHTML=e.point.lat;
 }
}

这些全部都是静态页面的脚本,为了更好的实现,我选择用WINFORM与其交互。下一篇继续。

C#调用百度地图API经验分享(三)的更多相关文章

  1. C#调用百度地图API经验分享(一)

    最近客户提了一个需求,要在网站中添加百度地图的显示,其实原来是有谷歌地图的,但由于谷歌在大陆遭到封杀,只好再给用户增加一个选择了. 下面我将自己最近整理的一些知识分享给大家. 如何使用百度地图API: ...

  2. C#调用百度地图API经验分享(四)

    这一篇,记录一下我调用的地图API实现的功能.下面介绍的都是一些片段的节选,不能直接复制就运行.在实现之前肯定要加载地图,先放一个webbroser控件,然后如下: private void Form ...

  3. C#调用百度地图API经验分享(二)

    接着上一篇,将上一篇代码的js提取出来:<script type="text/JavaScript">var map = new BMap.Map("allm ...

  4. 【c#】Form调用百度地图api攻略及常见问题

    首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...

  5. 调用百度地图API的总结

    因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...

  6. Angular 调用百度地图API接口

    Angular 调用百度地图API接口 参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...

  7. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

  8. HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    <!DOCTYPE html> <html lang="zh-cmn-Hans">     <meta charset="UTF-8&quo ...

  9. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

随机推荐

  1. 加密算法(DES,AES,RSA,MD5,SHA1,Base64)比较和项目应用(转载)

    加密技术通常分为两大类:"对称式"和"非对称式". 对称性加密算法:对称式加密就是加密和解密使用同一个密钥.信息接收双方都需事先知道密匙和加解密算法且其密匙是相 ...

  2. 【VB6】全局键盘钩子

    基本也没啥好说的,不要用到木马及恶意程序中是以前从VB.NET程序改到VB6的,阉割了一些功能,只提供键盘Hook功能想要截获热键可以在处理函数中返回1,里面有示例 下载地址 http://pan.b ...

  3. 【译】AI 让科技公司变得更强大吗

    机器学习可能是当今技术中最重要的基本趋势.由于机器学习的基础是数据 - 大量的数据 - 很常见的是,人们越来越担心已经拥有大量数据的公司会变得更强大.这有一定的道理,但是以相当狭窄的方式,同时ML也看 ...

  4. 设计模式:Builder

    简介 建造者模式(Builder),将一个复杂对象的表示和它的构建分离,这样同样的构造过程可以创建出不同的对象状态. 类图 下面的Product是要创建的对象的目标类型,产品. Builder 创建一 ...

  5. JQuery - 阻止回车键

    JQuery 和 js 禁止enter回车事件方法 jQuery版 $(window).keydown( function(e) { var key = window.event?e.keyCode: ...

  6. jQuery中FormData的使用

    web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...

  7. 23_pikle/shevel/json

    一.序列化       存储数据或者传输数据时,需要把对象进行处理,把对象处理成方便存储和传输的数据格式.不同的序列化,结果也不同.     序列化方式:         (1) pickle 可以将 ...

  8. 【UML】:类图

    1  实线/虚线 + 三角空心箭头: 继承extends:实线,三角空心箭头指向父类,子类指向父类,子类 is a 父类. 实现implements:虚线,三角空心箭头指向接口,类指向接口,类 实现 ...

  9. 一步步Cobol 400 上手自学入门教程03 - 数据部

    数据部的作用 程序中涉及到的全部数据(输入.输出.中间)都要在此定义,对它们的属性进行说明.主要描述以下属性: 数据类型(数值/字符)和存储形式(长度) 数据项之间的关系(层次和层号) 文件与记录的关 ...

  10. 创建python3虚拟环境指令和冻结所安装的包

    mkvirtualenv file_name -p python3 去掉后面的 P 和python3 代表创建python2环境 其中p代表路径的意思 冻结所安装包命令 pip freeze > ...