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

2023-02-19 01:03:02JavaScript028

如何从数据库获取地址然后在前台调用百度地图将位置显示,第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)

})

你想实现www.woxiangyougejia.com 这上面的具体什么功能呢？

这是两个代码，其实就是Google maps 的examples中的

根据这两个就可以实现你要的功能

有什么不明白的参照Google maps api吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w2.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Google Maps API Example - Google North America Offices</title>

type="text/javascript"></script>

//<![CDATA[

var map

var mgr

var icons = {}

var allmarkers = []

function load() {

if (GBrowserIsCompatible()) {

map = new GMap2(document.getElementById("map"))

map.addControl(new GLargeMapControl())

map.addControl(new GOverviewMapControl())

map.setCenter(new GLatLng(50, -98), 3)

map.enableDoubleClickZoom()

mgr = new MarkerManager(map, {trackMarkers:true})

window.setTimeout(setupOfficeMarkers, 0)

}

function getIcon(images) {

var icon = null

if (images) {

if (icons[images[0]]) {

icon = icons[images[0]]

} else {

icon = new GIcon()

icon.image = "images/"

+ images[0] + ".png"

var size = iconData[images[0]]

icon.iconSize = new GSize(size.width, size.height)

icon.iconAnchor = new GPoint(size.width >>1, size.height >>1)

icon.shadow = "images/"

+ images[1] + ".png"

size = iconData[images[1]]

icon.shadowSize = new GSize(size.width, size.height)

icons[images[0]] = icon

}

return icon

}

function setupOfficeMarkers() {

allmarkers.length = 0

for (var i in officeLayer) {

var layer = officeLayer[i]

var markers = []

for (var j in layer["places"]) {

var place = layer["places"][j]

var icon = getIcon(place["icon"])

var title = place["name"]

var posn = new GLatLng(place["posn"][0], place["posn"][1])

var marker = createMarker(posn,title,icon)

markers.push(marker)

allmarkers.push(marker)

}

mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1])

}

mgr.refresh()

}

function createMarker(posn, title, icon) {

var marker = new GMarker(posn, {title: title, icon: icon, draggable:true })

GEvent.addListener(marker, 'dblclick', function() { mgr.removeMarker(marker) } )

return marker

}

function deleteMarker() {

var markerNum = parseInt(document.getElementById("markerNum").value)

mgr.removeMarker(allmarkers[markerNum])

}

function clearMarkers() {

mgr.clearMarkers()

}

function reloadMarkers() {

setupOfficeMarkers()

}

//]]>

</script>

</head>

<br/>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Google Maps JavaScript API Example: Advanced Directions</title>

type="text/javascript"></script>

body {

font-family: Verdana, Arial, sans serif

font-size: 11px

margin: 2px

}

table.directions th {

background-color:#EEEEEE

}

img {

color: #000000

}

</style>

var map

var gdir

var geocoder = null

var addressMarker

function initialize() {

if (GBrowserIsCompatible()) {

map = new GMap2(document.getElementById("map_canvas"))

gdir = new GDirections(map, document.getElementById("directions"))

GEvent.addListener(gdir, "load", onGDirectionsLoad)

GEvent.addListener(gdir, "error", handleErrors)

setDirections("San Francisco", "Mountain View", "en_US")

}

function setDirections(fromAddress, toAddress, locale) {

gdir.load("from: " + fromAddress + " to: " + toAddress,

{ "locale": locale })

}

function handleErrors(){

if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)

alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code)

else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)

alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code)

else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)

alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code)

// else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) <--- Doc bug... this is either not defined, or Doc is wrong

// alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code)

else if (gdir.getStatus().code == G_GEO_BAD_KEY)

alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code)

else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)

alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code)

else alert("An unknown error occurred.")

}

function onGDirectionsLoad(){

// Use this function to access information about the latest load()

// results.

// e.g.

// document.getElementById("getStatus").innerHTML = gdir.getStatus().code

// and yada yada yada...