福如东海51Map地图接口_javascript能力_脚本之家

2019-11-30 03:16栏目:竞技宝竞猜
TAG:

51Map免费提供了地图接口以下是调用接口并且实现地理位置标注,存储,修改和回显功能。 51地图网址:

最近一个项目用到了经纬度,根据经纬度在地图上显示相应的位置

google map api 与jquery结合使用1-3

在网页中引入 复制代码 代码如下:

图片 1

 

在地图上标注: 复制代码 代码如下://地图标注$.ready{var ico=new LTIcon("",[24,24],[12,12]);var map=new LTMaps;//地图对象var controlB;//标记控件map.centerAndZoom;//天津map.handleMouseScroll();//鼠标滚轮var controlZoom = new LTStandMapControl();//缩放控件map.addControl;controlB = new LTMarkControl();//添加标注控件并把事件绑定到按钮controlB.setVisible;document.getElementById.onclick=function };map.addControl;LTEvent.addListener( controlB,"mouseup",function;})复制代码 代码如下://添加标注时执行此函数function getPoi{var poi = controlB.getMarkControlPoint.val; //x,y为input标签id通过它传入后台储存位置$.val;}复制代码 代码如下:

后台实现代码:
html代码:

google map api 与jquery结合使用(1)--控件,监听器[转帖]

看不到地图请点这里

 代码如下

google map api 与jquery结合使用(2) --标注,浮窗[转帖]

在读图上回显标注: 复制代码 代码如下://地图回显$.ready{map//地图function map{var map=new LTMaps;//地图对象var marker=new LTMarker.val;//创建标注 map.handleMouseScroll();//鼠标滚轮缩放 map.centerAndZoom.val; //以坐标为中心显示地图map.addOverLay//添加标注到地图上}修改地图上的标注: 复制代码 代码如下://地图回显$.ready{map//地图function map{var map=new LTMaps;//地图对象var marker=new LTMarker.val;//创建标注 map.handleMouseScroll();//鼠标滚轮缩放 map.centerAndZoom.val; //以坐标为中心显示地图map.addOverLay//添加标注到地图上var controlZoom = new LTStandMapControl();map.addControl;//添加标注控件并把事件绑定到按钮var controlB = new LTMarkControl();//标记控件controlB.setVisible;document.getElementById.onclick=function (){map.removeOverLay;controlB.btnClick()};map.addControl;LTEvent.addListener( controlB,"mouseup",function;}//添加标注时执行此函数function getPoi{var poi = controlB.getMarkControlPoint.val;$.val;}其他参数设置: 可以自定义标注图标样式 复制代码 代码如下:var ico=new LTIcon("",[24,24],[12,12]);//创建图标对象var marker=new LTMarker.val;//创建标注//当鼠标移动到标注上可以显示标注内容LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml;

<script src=";
<script type="text/javascript" src=";
<div style="width:730px;margin:auto;">  
     要查询的地址:<input id="text" type="text" value="" style="margin-right:100px;"onkeyup="searchByStationName();"/>
     查询结果(经纬度):<input id="result" type="text" />
     <div id="container"></div>
</div>
css代码:
<style>
    #container{position: absolute; margin-top:30px; width: 500px; height: 500px;  top: 50; border: 1px solid gray;overflow:hidden;display:none;}
</style>
js代码:
<script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom("北京市", 12);
    map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用

google map api 与jquery结合使用(3) --图标样式,使用xml和异步请求【转帖】

    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角,打开

 

    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); //允许自动调节窗体大小
function searchByStationName() {
    map.clearOverlays();//清空原来的标注
    var keyword = document.getElementById("text").value;
    localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0);
        document.getElementById("result").value = poi.point.lng + "," + poi.point.lat;
        map.centerAndZoom(poi.point, 18);
        var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注,为要查询的地方对应的经纬度
        map.addOverlay(marker);
        var content = document.getElementById("text").value + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat;
        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
        marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
         marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    });
    localSearch.search(keyword);
}

修改javascript代码:
map.js

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:福如东海51Map地图接口_javascript能力_脚本之家