asp.net 调用51ditu API

51地图API示例

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_30502965

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript c# ViewUI

原文链接：http://www.cnblogs.com/bobofsj11/archive/2009/07/23/1529336.html

本文展示了一个使用51地图API创建地图应用的例子。通过整合JavaScript API，实现了地图的加载、标记点添加、控件设置等功能。此外还包含了比例尺级别的设定及标记点交互等特性。

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>51地图</title>
   <script type="text/javascript" src="http://api.51ditu.com/js/maps.js "></script>
    <script type="text/javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>
</head>
<body>
    <form id="form1" runat="server">
     经度:<input runat="server" type="text" id="x" name="x" />
   纬度:<input runat="server" type="text" id="y" name="y" />
   比例尺级别:<input runat="server" type="text" id="z" name="z" />
    <div id="mymap"  style="position:relative; width:400px; height:300px;">
    </div>
    <script type="text/javascript">
var maps = new LTMaps( "mymap" );
maps.cityNameAndZoom( "chongqing" , 5 );
//添加缩放控件
var control = new LTSmallMapControl();
maps.addControl( control );
//添加拉框放大控件
var control = new LTZoomInControl();
maps.addControl( control );
//添加一个标记点
var marker1 = new LTMarker( new LTPoint( 11636224 , 3991040 ) );
var marker2 = new LTMarker( new LTPoint( 11641152 , 3992640 ) );
maps.addOverLay( marker1 );
maps.addOverLay( marker2 );
//添加一个标记点
var point = new LTPoint( 11640969 , 3989945 );//
var marker = new LTMarker( point );
maps.addOverLay( marker );
var infoWin = new LTInfoWindow( marker );
infoWin.setLabel( "<a href='http://www.51ditu.com' target='_blank'>http://www.51ditu.com</a>" );
maps.addOverLay( infoWin );
//键盘操作支持
maps.handleKeyboard();
//鼠标滚轮支持
maps.handleMouseScroll();
//实现系统的setMap方法
function setMap(point,zoom)
{
document.getElementById("x").value=point.getLongitude();

document.getElementById("y").value=point.getLatitude();

document.getElementById("z").value=zoom;

}
var ez=new LTEZMarker("ezmarker");
ez.setDefaultView("chongqing",10);//地图默认定位到重庆
ez.setPlaceList(true);//在地图上显示地图搜索控件
ez.setSearch(true,"重庆");//在地图上显示搜索控件，并将默认搜索城市指定为重庆
LTEvent.addListener(ez,"mark",setMap);//"mark"是标注事件
</script>
    </form>
</body>
</html>

转载于:https://www.cnblogs.com/bobofsj11/archive/2009/07/23/1529336.html