javaweb 开发有哪些地图插件是到乡镇级别的

JavaScript016

javaweb 开发有哪些地图插件是到乡镇级别的,第1张

<!DOCTYPE><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/htmlcharset=gbk" /><title>百度地图</title> <style type="text/css"> html{height:100%}body{height:100%margin:0pxpadding:0px}#container{height:100%}</style> <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script></head><body> <input type="text" id="cityName" value="福州"/><input type="button" onclick="setCity()" value="查找" /><div id="container" style="width:1024pxheight:600px"></div> <script type="text/javascript"> var map = new BMap.Map("container") //在container容器中创建一个地图,参数container为div的id属性var point = new BMap.Point(120.2,30.25) //创建点坐标map.centerAndZoom(point, 14) //初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom() //激活滚轮调整大小功能map.addControl(new BMap.NavigationControl()) //添加控件:缩放地图的控件,默认在左上角;map.addControl(new BMap.MapTypeControl()) //添加控件:地图类型控件,默认在右上方;map.addControl(new BMap.ScaleControl()) //添加控件:地图显示比例的控件,默认在左下方;map.addControl(new BMap.OverviewMapControl()) //添加控件:地图的缩略图的控件,默认在右下方; TrafficControl var search = new BMap.LocalSearch("中国", { onSearchComplete: function(result){if (search.getStatus() == BMAP_STATUS_SUCCESS){ var res = result.getPoi(0) var point = res.point map.centerAndZoom(point, 11) } },renderOptions: { //结果呈现设置,map: map, autoViewport: true, selectFirstResult: true } ,onInfoHtmlSet:function(poi,html){//标注气泡内容创建后的回调函数,有了这个,可以简单的改一下返回的html内容了。// alert(html.innerHTML) }//这一段可以不要,只不过是为学习更深层次应用而加入的。})function setCity(){ search.search(document.getElementById("cityName").value) } search.search(document.getElementById("cityName").value) </script></body></html>第二种: 谷歌

首先引入 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

代码如下

js代码

var myLatlng = new google.maps.LatLng(ret.attache.json.lat, ret.attache.json.lng)// 中国地图全图

var optMap =

{

zoom: 15,

center: myLatlng,

streetViewControl:false,

mapTypeControl: true,

mapTypeControlOptions: {

mapTypeIds: [/**google.maps.MapTypeId.SATELLITE ,google.maps.MapTypeId.HYBRID* */], // comment

position: google.maps.ControlPosition.TOP_LEFT

},

// navigationControl: true,

navigationControlOptions: {

style: google.maps.NavigationControlStyle.DEFAULT,

position: google.maps.ControlPosition.LEFT

},

//ROADMAP SATELLITE

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map(document.getElementById('container'),optMap)

map.setOptions({Zoom:18,center:myLatlng})

html

<div id="locationDiv" >

<div id="container" style="position:relativewidth:450pxheight:300px"></div>

</div>

你的url要显示在什么地方?

如果是显示在最后,可以在js里面追加html

比如:

var url = document.createElement('a')

url.href = 'http://xxxx'

url.innerText = url.href

document.body.appendChild(url)

手机js页面实现一键定位,并且把获取的地理位置显示到文本框中代码如下:

var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数,errorFunc获取定位失败回调

//首先设置默认城市

var defCity = {

id: '000001',

name: '北京市',

date: curDateTime()//获取当前时间方法

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' })

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function (position) {

var lat = position.coords.latitude

var lon = position.coords.longitude

//var map = new BMap.Map("container")  // 创建Map实例

var point = new BMap.Point(lon, lat)// 创建点坐标

var gc = new BMap.Geocoder()

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents

var curCity = {

id: '',

name: addComp.province,

date: curDateTime()

}

//当前定位城市

$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' })

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street)

if (successFunc != undefined)

successFunc(addComp)

})

},

function (error) {

switch (error.code) {

case 1:

alert("位置服务被拒绝。")

break

case 2:

alert("暂时获取不到位置信息。")

break

case 3:

alert("获取位置信息超时。")

break

default:

alert("未知错误。")

break

}

var curCity = {

id: '000001',

name: '北京市',

date: curDateTime()

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' })

if (errorFunc != undefined)

errorFunc(error)

}, { timeout: 5000, enableHighAccuracy: true })

} else {

alert("你的浏览器不支持获取地理位置信息。")

if (errorFunc != undefined)

errorFunc("你的浏览器不支持获取地理位置信息。")

}

}

var showPosition = function (position) {

var lat = position.coords.latitude

var lon = position.coords.longitude

//var map = new BMap.Map("container")  // 创建Map实例

var point = new BMap.Point(lon, lat)// 创建点坐标

var gc = new BMap.Geocoder()

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents

var curCity = {

id: '',

name: addComp.province,

date: curDateTime()

}

//当前定位城市

$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' })

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street)

})

}

var showPositionError = function (error) {

switch (error.code) {

case 1:

alert("位置服务被拒绝。")

break

case 2:

alert("暂时获取不到位置信息。")

break

case 3:

alert("获取位置信息超时。")

break

default:

alert("未知错误。")

break

}

var curCity = {

id: '000001',

name: '北京市',

date: curDateTime()

}

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' })

}

一、PC端通过IP实现定位代码

<script type="text/javascript" src="http://fw.qq.com/ipaddress"></script>

<script type="text/javascript">

document.write(IPData[0])   //显示IP地址

document.write(IPData[2])   //显示省

document.write(IPData[3])   //显示市

</script>

二、获取客户端地址代码

<script>

var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' + Math.random()

$.getJSON(url, function(data) {

alert(data.Ip)

})

</script>