DELPHI盒子
!实时搜索: 盒子论坛 | 注册用户 | 修改信息 | 退出
检举帖 | 全文检索 | 关闭广告 | 捐赠
技术论坛
 用户名
 密  码
自动登陆(30天有效)
忘了密码
≡技术区≡
DELPHI技术
移动应用开发
Web应用开发
数据库专区
报表专区
网络通讯
开源项目
论坛精华贴
≡发布区≡
发布代码
发布控件
文档资料
经典工具
≡事务区≡
网站意见
盒子之家
招聘应聘
信息交换
论坛信息
最新加入: g22800
今日帖子: 20
在线用户: 26
导航: 论坛 -> Web应用开发 斑竹:bodies  
作者:
男 asdfzxcv66 (asdfzxcv) ▲▲▲▲▲ -
注册会员
2020/1/10 10:04:46
标题:
百度地图,如何添加标注,比如单击button,在(120.4564,32.45464)和(120.546565,32.56478)处添加标记,标记最好是序号样式,代码如何写,谢谢! 浏览:378
加入我的收藏
楼主: 1 unit U_map;
  2 
  3 interface
  4 //----------//
  5 //----------COPY BY 无言 QQ:4252181 ----------//
  6 //----------//
  7 uses
  8   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  9   Dialogs, OleCtrls, SHDocVw, StdCtrls, MSHTML, StrUtils, ActiveX,
 10   ExtCtrls;
 11 //----------//
 12 //----------欢迎大家和我联系,软件开发 ----------//
 13 //----------//
 14 type
 15   TF_map = class(TForm)
 16     grp1: TGroupBox;
 17     WebBrowser: TWebBrowser;
 18     grp2: TGroupBox;
 19     grp3: TGroupBox;
 20     grp4: TGroupBox;
 21     tmr1: TTimer;
 22     GroupBox1: TGroupBox;
 23     GroupBox2: TGroupBox;
 24     Edit1: TEdit;
 25     Edit2: TEdit;
 26     chk1: TCheckBox;
 27     Edit3: TEdit;
 28     Edit4: TEdit;
 29     edt1: TEdit;
 30     edt2: TEdit;
 31     edt3: TEdit;
 32     edt4: TEdit;
 33     procedure FormCreate(Sender: TObject);
 34     procedure btn1Click(Sender: TObject);
 35     procedure btn2Click(Sender: TObject);
 36     procedure FormShow(Sender: TObject);
 37     procedure btn3Click(Sender: TObject);
 38     procedure Button1Click(Sender: TObject);
 39     procedure loadweb();
 40     procedure btn4Click(Sender: TObject);
 41     procedure AppMsg(var Msg: TagMsg; var Handled: Boolean);
 42     procedure GetWebContent();
 43     procedure tmr1Timer(Sender: TObject);
 44   private
 45     { Private declarations }
 46     lng, lat: string;
 47   public
 48     { Public declarations }
 49   end;
 50 
 51 var
 52   F_map: TF_map;
 53   const
 54   Doc1: string = '<html>'
 55   + '<head>'
 56   + '<meta name="viewport" con_tent="initial-scale=1.0, user-scalable=no" />'
 57   + '<meta http-equiv="Content-Type" con_tent="text/html; charset=gb2312" />'
 58   + '<title>BAIDU MAP</title>'
 59   + '<style type="text/css">'
 60   + 'html{height:100%}' + 'body{height:100%;margin:0px;padding:0px}'
 61   + '#container{height:100%}'
 62   + '</style>'
 63   + '<script type="text/javascript"src="http://api.map.baidu.com/api?v=1.3";></script>'
 64   + '</head>'
 65   + '<body>'
 66   + '<div id="container"></div>'
 67   //style="visibility:hidden; display:none">
 68   +'<div id="centerweidu" style="visibility:hidden; display:none"></div>'
 69   +'<div id="centerjingdu" style="visibility:hidden; display:none"></div>'
 70   +'<div id="weidutemp" style="visibility:hidden;display:none"></div>'
 71   +'<div id="jingdutemp" style="visibility:hidden;display:none"></div>'
 72   +'<div id="weidu" style="visibility:hidden;display:none"></div>'
 73   +'<div id="jingdu" style="visibility:hidden;display:none"></div>'
 74   +'<div id="Distance" style="visibility:hidden;display:none"></div>'
 75   + '<script language="JavaScript" type="text/javascript">'
 76   + 'var map = new BMap.Map("container");'  // 创建地图实例
 77   + 'map.addControl(new BMap.NavigationControl());'
 78   + 'map.addControl(new BMap.ScaleControl());'
 79   + 'map.addControl(new BMap.OverviewMapControl());'
 80   + 'map.addControl(new BMap.MapTypeControl(BMAP_ANCHOR_BOTTOM_RIGHT));'   // 将标注添加到地图中
 81   + 'map.enableScrollWheelZoom();'          // 启用滚轮放大缩小。
 82   + 'map.enableKeyboard();'          // 启用键盘操作。
 83   + 'var centerpoint = new BMap.Point(126.666431,45.764502);' // 创建点坐标  126.666431, 45.764502
 84   + 'var marker = new BMap.Marker(centerpoint);'        // 创建标注
 85   + 'map.addOverlay(marker);'
 86   + 'var label = new BMap.Label("哈尔滨海铭科技有限公司",{offset:new BMap.Size(20,-10)});'
 87   + 'marker.setLabel(label);'
 88   +' map.centerAndZoom(centerpoint, 15);' // 初始化地图,设置中心点坐标和地图级别'
 89 
 90   +' map.addEventListener("mousemove", function(e){'
 91   +' document.getElementById("weidutemp").innerHTML = e.point.lng;'
 92   +' document.getElementById("jingdutemp").innerHTML =  e.point.lat;});'
 93   +' map.addEventListener("click", function(f){'
 94   +' document.getElementById("weidu").innerHTML = f.point.lng;'
 95   +' document.getElementById("jingdu").innerHTML =  f.point.lat;});'
 96 
 97   +'function SetCarCenterPoint(newlng,newlat){'
 98   +'centerpoint=new BMap.Point(newlng,newlat);'
 99   + 'var marker = new BMap.Marker(centerpoint);'
100   + 'map.addOverlay(marker);'
101   + 'var label = new BMap.Label("当前汽车坐标",{offset:new BMap.Size(20,-10)});'
102   + 'marker.setLabel(label);'
103   + 'map.panTo(centerpoint);'
104   +'}'
105 
106   +'function SetAutoCenterPoint(newlng,newlat){'
107   +'centerpoint=new BMap.Point(newlng,newlat);'
108   + 'var marker = new BMap.Marker(centerpoint);'
109   + 'map.addOverlay(marker);'
110   + 'var label = new BMap.Label("4S店坐标",{offset:new BMap.Size(20,-10)});'
111   + 'marker.setLabel(label);'
112   + 'map.panTo(centerpoint);'
113   +'}'
114 
115   +'function PrintLine(newlng,newlat,oldlng,oldlat,biaoji){'
116   +'var point = new BMap.Point(newlng,newlat);' // 创建点坐标
117   + 'map.panTo(point);'
118 //  + 'if (biaoji=''0'')'
119 //  +'{'
120 //  + 'var marker = new BMap.Marker(point);'
121 //  + 'map.addOverlay(marker);'
122 //  +'}'
123   + 'var polyline = new BMap.Polyline(['
124   + 'new BMap.Point(oldlng,oldlat),'
125   + 'new BMap.Point(point.lng, point.lat)'
126   + '], {strokeColor:"blue", strokeWeight:4, strokeOpacity:0.5});'
127   + 'map.addOverlay(polyline);'
128   +'}'
129 
130   +'function GetCenter(){'
131   +' var center = map.getCenter();'
132   +' document.getElementById("centerweidu").innerHTML = center.lng;'
133   +' document.getElementById("centerjingdu").innerHTML = center.lat;'
134   +'}'
135   +'function Distance(newlng,newlat){'
136   +'var pointA=centerpoint;'
137   +'var pointB=new BMap.Point(newlng,newlat);'
138   +'document.getElementById("Distance").innerHTML = map.getDistance(pointA,pointB);'
139   +'alert(''距离是:''+map.getDistance(pointA,pointB)+'' 米。'');'
140  // +'return map.getDistance(pointA,pointB);'
141   +'}'
142   + '</script>'
143   + '</body>'
144   + '</html>';
145 implementation
146 
147 {$R *.dfm}
148 
149 procedure TF_map.AppMsg(var Msg: TagMsg; var Handled: Boolean);
150 var
151   mPoint: TPoint;
152 begin
153   if IsChild(WebBrowser.Handle, Msg.Hwnd) and (Msg.Message = WM_MOUSEMOVE) then
154   begin
155     GetCursorPos(mPoint);
156     GetWebContent;
157     Handled := True;
158   end;
159 end;
160 
161 function JavaScript(j: string): Boolean;
162 begin
163   try
164     // (F_map.WebBrowser.Document as IHTMLDocument2).parentWindow.execScript(j, 'JavaScript');
165     F_map.WebBrowser.OleObject.Document.parentWindow.execScript(j,
166       'JavaScript');
167     Result := True;
168   except
169     Result := false;
170   end;
171 end;
172 
173 procedure TF_map.btn1Click(Sender: TObject);
174 var
175   str: string;
176 begin
177   self.WebBrowser.OleObject.Document.parentWindow.execScript('GetCenter()',
178     'JavaScript');
179 end;
180 
181 procedure TF_map.btn2Click(Sender: TObject);
182 var
183   str: string;
184 begin
185   if (Edit1.Text <> '') and (Edit2.Text <> '') then
186   begin
187     self.WebBrowser.OleObject.Document.parentWindow.execScript
188       ('Distance(' + Edit1.Text + ',' + Edit2.Text + ')', 'JavaScript');
189   end;
190 end;
191 
192 procedure TF_map.btn3Click(Sender: TObject);
193 var
194   biaoji: string;
195 begin
196   if lng = '' then
197   begin
198     lng := '126.666431'; // 126.666431,45.764502
199   end;
200   if lat = '' then
201   begin
202     lat := '45.764502';
203   end;
204   if chk1.Checked then
205   begin
206     biaoji := '1';
207   end
208   else
209   begin
210     biaoji := '0';
211   end;
212   if (Edit1.Text <> '') and (Edit2.Text <> '') then
213   begin
214     self.WebBrowser.OleObject.Document.parentWindow.execScript
215       ('PrintLine(' + Edit1.Text + ',' + Edit2.Text + ',' + lng + ',' + lat +
216         ',' + biaoji + ')', 'JavaScript');
217     lng := self.Edit1.Text;
218     lat := self.Edit2.Text;
219   end;
220 end;
221 
222 procedure TF_map.btn4Click(Sender: TObject);
223 begin
224   loadweb;
225   lng := '';
226   lat := '';
227 end;
228 
229 procedure TF_map.Button1Click(Sender: TObject);
230 var
231   str: string;
232 begin
233   if (Edit3.Text <> '') and (Edit4.Text <> '') then
234   begin
235     self.WebBrowser.OleObject.Document.parentWindow.execScript
236       ('SetAutoCenterPoint(' + Edit3.Text + ',' + Edit4.Text +
237         ')', 'JavaScript');
238   end;
239 end;
240 
241 procedure TF_map.loadweb();
242 var
243   sl: TStringList;
244   ms: TMemoryStream;
245 begin
246   self.WebBrowser.Silent := True;
247   WebBrowser.Navigate('about:blank'); (WebBrowser.Document as IHTMLDocument2)
248   .URL := 'http://127.0.0.1/&#39;;
249   while WebBrowser.ReadyState < READYSTATE_INTERACTIVE do
250     Application.ProcessMessages;
251   if Assigned(WebBrowser.Document) then
252   begin
253     sl := TStringList.Create;
254     try
255       ms := TMemoryStream.Create;
256       try
257         sl.Text := Doc1;
258         sl.SaveToStream(ms);
259         ms.Seek(0, 0); (WebBrowser.Document as IPersistStreamInit)
260         .Load(TStreamAdapter.Create(ms));
261       finally
262         ms.Free;
263       end;
264     finally
265       sl.Free;
266     end;
267   end;
268 end;
269 
270 procedure TF_map.tmr1Timer(Sender: TObject);
271 begin
272   GetWebContent;
273 end;
274 
275 procedure TF_map.FormCreate(Sender: TObject);
276 begin
277   loadweb;
278   //Application.OnMessage:=AppMsg;
279 end;
280 
281 procedure TF_map.FormShow(Sender: TObject);
282 begin
283   lng := '';
284   lat := '';
285   tmr1.Enabled := True;
286 end;
287 
288 procedure TF_map.GetWebContent();
289 var
290   html: IHTMLDocument2; // 定义网页元素
291   submitbutton: OleVariant; // 定义按钮
292   centerweidu, centerjingdu, weidu, jingdu, weidutemp,
293     jingdutemp: IHTMLElement; // 定义网页输入元素
294 begin
295   try
296     html := self.WebBrowser.Document as IHTMLDocument2;
297     centerweidu := html.all.item('centerweidu', 0) as IHTMLElement;
298     centerjingdu := html.all.item('centerjingdu', 0) as IHTMLElement;
299     weidu := html.all.item('weidu', 0) as IHTMLElement;
300     jingdu := html.all.item('jingdu', 0) as IHTMLElement;
301     weidutemp := html.all.item('weidutemp', 0) as IHTMLElement;
302     jingdutemp := html.all.item('jingdutemp', 0) as IHTMLElement;
303     edt1.Text := centerweidu.innerText;
304     edt2.Text := centerjingdu.innerText;
305     edt3.Text := weidutemp.innerText;
306     edt4.Text := jingdutemp.innerText;
307     Edit1.Text := weidu.innerText;
308     Edit2.Text := jingdu.innerText;
309   except
310   end;
311 end;
312 
313 end.
----------------------------------------------
-
作者:
男 asdfzxcv66 (asdfzxcv) ▲▲▲▲▲ -
注册会员
2020/1/10 11:36:37
1楼: 上面的代码需安装DevExpress控件才可运行
----------------------------------------------
-
作者:
男 delphiilove (乌羽玉) ★☆☆☆☆ -
普通会员
2020/1/10 12:01:28
2楼:  有 方法,不需要 DevExpress 。
推荐用 ScriptGate
----------------------------------------------
GOD with US
作者:
男 asdfzxcv66 (asdfzxcv) ▲▲▲▲▲ -
注册会员
2020/1/10 14:04:51
3楼:  delphiilove (乌羽玉) 怎么用?
----------------------------------------------
-
作者:
男 asdfzxcv66 (asdfzxcv) ▲▲▲▲▲ -
注册会员
2020/1/10 14:33:00
4楼: 百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置,

也可以使用marker.setIcon()方法。

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.323066,39.989956), 16);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    var points = [
        [116.316967,39.990748],
        [116.323938,39.989919],
        [116.328896,39.988039],
        [116.321135,39.987072],
        [116.332453,39.989007],
        [116.324045,39.987984],
        [116.322285,39.988316],
        [116.322608,39.986381]
    ];
    // 向地图添加标注
    for( var i = 0;i < points.length; i++){
        var myIcon = new BMap.Icon("http://7xic1p.com1.z0.glb.clouddn.com/markers.png";, new BMap.Size(23, 25), {
          // 指定定位位置
          offset: new BMap.Size(10, 25),
          // 当需要从一幅较大的图片中截取某部分作为标注图标时,需要指定大图的偏移位置
          imageOffset: new BMap.Size(0, 0 - i * 25) // 设置图片偏移
        });
        var point = new BMap.Point(points[i][0],points[i][1]);
        // 创建标注对象并添加到地图
        var marker = new BMap.Marker(point,{icon: myIcon});
        map.addOverlay(marker);
    };

</script>
----------------------------------------------
-
作者:
男 asdfzxcv66 (asdfzxcv) ▲▲▲▲▲ -
注册会员
2020/1/10 14:33:54
1楼: 这个看不懂,可能有用,会的帮我看看
----------------------------------------------
-
作者:
男 majx (skin) ★☆☆☆☆ -
普通会员
2020/1/10 23:14:46
5楼: 这个用百度地图的JSP API和DELPHI的IE控件实现起来很简单。
----------------------------------------------
majx,QQ 613354940
作者:
男 grjs_2004 (grjsITname) ★☆☆☆☆ -
盒子活跃会员
2020/1/14 13:39:52
6楼: N多年前就搞过,建议先看明白百度API,写成脚本的模式,用网页加载调出浏览即可!
----------------------------------------------
Everyone will to do best!
作者:
男 pcplayer (pcplayer) ★☆☆☆☆ -
普通会员
2020/1/14 17:12:13
7楼: 我以前在 FireMonkey 里面用 TWebBrowser 来调用百度地图,利用百度提供的 Javascript 的 API,在地图上标注打点,没问题。在安卓手机上测试是可以的。
----------------------------------------------
-
信息
登陆以后才能回复
Copyright © 2CCC.Com 盒子论坛 v2.1 版权所有 页面执行78.125毫秒 RSS