这一篇我将跟大家分享一下我自己在开发过程中总结出的一些操作地图的方法,属性,及思路,希望可以让大家少走弯路。
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经验分享(三)的更多相关文章
-
C#调用百度地图API经验分享(一)
最近客户提了一个需求,要在网站中添加百度地图的显示,其实原来是有谷歌地图的,但由于谷歌在大陆遭到封杀,只好再给用户增加一个选择了. 下面我将自己最近整理的一些知识分享给大家. 如何使用百度地图API: ...
-
C#调用百度地图API经验分享(四)
这一篇,记录一下我调用的地图API实现的功能.下面介绍的都是一些片段的节选,不能直接复制就运行.在实现之前肯定要加载地图,先放一个webbroser控件,然后如下: private void Form ...
-
C#调用百度地图API经验分享(二)
接着上一篇,将上一篇代码的js提取出来:<script type="text/JavaScript">var map = new BMap.Map("allm ...
-
【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
-
调用百度地图API的总结
因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...
-
Angular 调用百度地图API接口
Angular 调用百度地图API接口 参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...
-
调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
-
HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
-
HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...
随机推荐
-
Android笔记——在布局文件中插入另一个布局文件
假如有一个布局文件A.xml想把另外一个布局文件B.xml引进其布局,则可以通过下面的代码 <include layout="@layout/B" />
-
[偏微分方程教程习题参考解答]4.1Duhamel 原理
1. 如果已知下述常微分方程的特定初值问题 $$\bex \sedd{\ba{ll} -y''+y=0,&x>0,\\ y(0)=0,\quad y'(0)=1 \ea} \eex$$ ...
-
C++ 中 const 和 static 的作用
目录 const 的主要应用如下: const 关键字使用的注意点: C++中static关键字有三个明显的作用: const的主要应用如下: const 用于定义常量:const定义的常量编译器可以 ...
-
COGS 577 蝗灾 [CDQ分治入门题]
题目链接 昨天mhr神犇,讲分治时的CDQ分治的入门题. 题意: 你又一个w*w正方形的田地. 初始时没有蝗虫. 给你两个操作: 1. 1 x y z: (x,y)这个位置多了z只蝗虫. 2. 2 x ...
-
2.添加键盘钩子。向进程中注入dll
学习笔记 1.首先要建立mfc的动态链接库.在def文件中放入要导出的函数名. 2.添加函数如下 //安装钩子 //HHOOK SetWindowsHookEx( // int idHook,//钩子 ...
-
MongoDB系列之三(副本集配置)
今天我测试了一下MongoDB的副本集的配置. 首先从概念上说一下MongoDB副本集和主从复制的区别.其实副本集(Replica Set)是主从复制的高级形式.高级在哪里呢?主动复制实现了数据备份+ ...
-
Winform控件Tag使用规范
背景 Tag在WinForm控件中经常被用来存储临时数据,类型为object,但是当程序中多个地方使用到Tag时,容易造成Tag使用的混乱,Tag是如此重要的一个属性,应该要好好考虑下如何有效的使用T ...
-
api接口写好了?想过(Accept,Content-Type)?返回类型json|xml?
api接口写好了?想过(Accept,Content-Type)?返回类型json|xml? 起因: - A,B. A调用B提供的api接口. - A:为毛你的接口返回的是xml格式的(浏览器访问)? ...
-
利用EF Core的Join进行多表查询
背景 话说有这么一家子,老公养了一条狗,老婆养了一只猫. 数据库的设计 人表 宠物表 通过表可以知道,宠物通过Owner指向主人的Id. 问题来了,我要和故事开头一样,老公-狗,老婆-猫,对应起来,怎 ...
-
YARN调试过程中的常见问题
执行操作: hadoop jar share/hadoop/mapreduce/hadoop-mapreduce-examples-3.1.0.jar wordcount /user/today/i ...