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

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. JS学习笔记7_表单脚本

    1.获取表单及表单元素引用的方式 var mForm = document.forms[formName];获取表单引用 mForm.elements[elemName]获取表单元素,如有同名的,则得 ...

  2. Windows编译Opencv

    下载安装CMake 下载Opencv源码 打开CMake,设置源码路径和生成路径,点击Configure选择要生成的版本.(这里要多次Configure,直到所有红色消失!) 勾选BUILD_open ...

  3. Winform相关

    (1)C# WinForm程序退出的方法 1.this.Close();   只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Applica ...

  4. 去除DataTable指定列的重复行

    DataTable dt = ds.Tables[]; //获得 datatable DataView dv = new DataView(dt); DataTable dt2 = dv.ToTabl ...

  5. WPF 使用 Direct2D1 画图 绘制基本图形

    本文来告诉大家如何在 Direct2D1 绘制基本图形,包括线段.矩形.椭圆 本文是一个系列 WPF 使用 Direct2D1 画图入门 WPF 使用 Direct2D1 画图 绘制基本图形 本文的组 ...

  6. python 数据类型二 (列表和元组)

    一.列表 1.1 列表的介绍 列表是python的基本数据类型之一,其他编程语言也有类似的数据类型,比如JS中的数组,java中的数组等等,它是以[]括起来,每个元素用逗号隔开,而且可以存放各种数据类 ...

  7. 自用 docker-compose

    version: '3.1' services: mysql: image: mysql: command: --default-authentication-plugin=mysql_native_ ...

  8. python学习笔记12-深浅拷贝

    以上为浅拷贝. .copy()函数 赋值:数据完全共享(=赋值是在内存中指向同一个对象,如果是可变(mutable)类型,比如列表,修改其中一个,另一个必定改变 如果是不可变类型(immutable) ...

  9. 【转】通过js获取系统版本以及浏览器版本

    function getOsInfo() { var userAgent = navigator.userAgent.toLowerCase(); var name = 'Unknown'; var ...

  10. 通过超链接启动App

    问题:微信里分享一个链接给你,你点击这个链接,一.如果你安装了这个钱包,那就直接打开钱包.二.如果没有安装钱包就跳转到下载钱包的地方 要点:首先要让浏览器知道 app 是谁,然后再让浏览器调用app ...