如何从数据库获取地址然后在前台调用百度地图将位置显示

如何从数据库获取地址然后在前台调用百度地图将位置显示,第1张

数据库存经纬度坐标及文字描述,用ajax取出展示。

var map = new BMap.Map("container")

$(function()

{

$.getJSON("/map/ajaxDb.aspx?id="+$("#hid_id").val(), { "resultType": "json" }, function(data, textStatus)

{

slng=data[0].lng

slat=data[0].Lat

var sContent ="<div style='line-height:1.8emfont-size:12px'><b>地址:</b>"+data[0].address+"<br/></div>"

var marker = new BMap.Marker(new BMap.Point(slng, slat)) // 创建标注

map.addOverlay(marker) // 将标注添加到地图

var infoWindow = new BMap.InfoWindow(sContent) // 创建信息窗口对象

marker.addEventListener("click", function(){

this.openInfoWindow(infoWindow)

})

})

})

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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>百度地图API自定义地图</title>

<!--引用百度地图API-->

<style type="text/css">

    html,body{margin:0padding:0}

    .iw_poi_title {color:#CC5522font-size:14pxfont-weight:boldoverflow:hiddenpadding-right:13pxwhite-space:nowrap}

    .iw_poi_content {font:12px arial,sans-serifoverflow:visiblepadding-top:4pxwhite-space:-moz-pre-wrapword-wrap:break-word}

</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

</head>

<body>

    <!--百度地图容器-->

    <div style="width:697pxheight:550pxborder:#ccc solid 1px" id="dituContent"></div>

</body>

<script type="text/javascript">

    //创建和初始化地图函数:

    function initMap(){

        createMap()//创建地图

        setMapEvent()//设置地图事件

        addMapControl()//向地图添加控件

    }

     

    //创建地图函数:

    function createMap(){

        var map = new BMap.Map("dituContent")//在百度地图容器中创建一个地图

        var point = new BMap.Point(120.972718,31.416819)//定义一个中心点坐标

        map.centerAndZoom(point,17)//设定地图的中心点和坐标并将地图显示在地图容器中

        window.map = map//将map变量存储在全局

    }

     

    //地图事件设置函数:

    function setMapEvent(){

        map.enableDragging()//启用地图拖拽事件,默认启用(可不写)

        map.enableScrollWheelZoom()//启用地图滚轮放大缩小

        map.enableDoubleClickZoom()//启用鼠标双击放大,默认启用(可不写)

        map.enableKeyboard()//启用键盘上下左右键移动地图

    }

     

    //地图控件添加函数:

    function addMapControl(){

        //向地图中添加缩放控件

 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE})

 map.addControl(ctrl_nav)

        //向地图中添加缩略图控件

 var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1})

 map.addControl(ctrl_ove)

        //向地图中添加比例尺控件

 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT})

 map.addControl(ctrl_sca)

    }   

     

    initMap()//创建和初始化地图

</script>

</html>

实在不会,看官方API的文档http://openapi.baidu.com/map/index.html


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/sjk/9876063.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存