大家好，今天小编来为大家解答ip定位网站源码分享这个问题，ip地址定位网站很多人还不知道，现在让我们一起来看看吧！
之前在工作中实现了一个小的功能模块是调用百度地图的接口，实现初始化位置点和路线以及自己添加位置点和路线的功能，现在记录一下，方便自己以后来回顾知识。此demo主要实现了以下功能：
在地图上添加位置点，并添加位置点的名称备注，右键停止添加位置点，添加点之后在左侧有一个位置点的列表，当点击列表中的点时，地图会将中心点移动到该点，并在点上显示标签为该位置点的名称备注。在地图上可以添加一条路线，完成路线时右键停止，然后点击保存路线会弹出该线上所有折点的位置点所构成的字符串，点击编辑路线，路线就开启编辑功能，可以修改路线。
下面是添加点的效果图
添加路线时的效果图
以下是JS部分源码
varmap;\nvarmyVue;\nvaraddpoint=false;//添加点的判断\nvaraddline=false;//添加线的判断\n$(function(){\ninitMap();\nmyVue=newVue({\nel:&app&39;&39;&39;&39;&39;&39;&39;&34;point&39;rightclick&39;mousemove&39;click&34;line&39;click&39;rightclick&39;mousemove&34;&34;&39;,&39;;&39;39;,strokeWeight:5,strokrOpacity:1});\nmap.addOverlay(editline);\nthis.editLine=editline;\neditline.enableEditing();\n},\nlineDelClick:function(){\nconstlines=this.lines;\nfor(leti=0;i<lines.length;i++){\nmap.removeOverlay(lines[i]);\n}\nthis.lines=[];\nthis.linepoints=[];\n},\nclear:function(){\nmap.removeEventListener(&39;,myVue.mouseMove);\nmap.removeEventListener(&39;,myVue.addpoint);\nmap.removeEventListener(&39;,myVue.addLine);\nmap.removeEventListener(&39;,myVue.clear);\nmap.removeOverlay(myVue.mouseMarker);\nthis.action=&34;;\nthis.mouseMarker=&39;;\nif(this.mouseLine!=&34;){\nmap.removeOverlay(this.mouseLine);\nthis.mouseLine=&34;;\n}\n},\nhandleClose(done){\nthis.$confirm(&39;)\n.then(_=>{\ndone();\n})\n.catch(_=>{});\n},\nmouseMove:function(e){\n//console.log(1);\nif(this.action==&39;){\nmyVue.showMousePoint(e);\n}elseif(this.action==&39;){\nmyVue.showMouseLine(e);\n}\n},\naddpoint:function(e){\nif(this.action==&39;){\nthis.$prompt(&39;,&39;,{\nconfirmButtonText:&39;,\ncancelButtonText:&39;,\n}).then(({value})=>{\nvarmarker=newBMap.Marker(e.point,{icon:this.myIcon});\nmap.addOverlay(marker);\nmarker.name=value;\nmyVue.points.push(marker);\nthis.$message({\ntype:&39;,\nmessage:&39;+value+&39;,\n});\n}).catch(()=>{\nthis.$message({\ntype:&39;,\nmessage:&39;\n});\n});\n}\n},\naddLine:function(e){\nif(this.action==&39;){\nif(this.linepoints.length>0){\nconstline=newBMap.Polyline([this.linepoints[this.linepoints.length-1],e.point],{strokeColor:&00F0f0&34;&39;39;,strokeWeight:5,strokrOpacity:0.3});\nmap.addOverlay(mouseline);\nmap.removeOverlay(this.mouseLine);\nthis.mouseLine=mouseline;\n}\n},\nshowMousePoint:function(e){\nif(this.mouseMarker==&34;){\nthis.mouseMarker=newBMap.Marker(e.point,{icon:this.myIcon});\nmap.addOverlay(this.mouseMarker);\n}\nthis.mouseMarker.setPosition(e.point);\n},\ntoCenter:function(i){\nif(myVue.tmpLabel!=&39;){\nmap.removeOverlay(myVue.tmpLabel);\nmyVue.tmpLabel=&39;;\n}\nmap.panTo(myVue.points[i].point);\nvarstr=&39;point_label&34;+myVue.points[i].name+&34;;\nconstlabel=newBMap.Label(str,{position:myVue.points[i].point});\nmyVue.tmpLabel=label;\nmap.addOverlay(label);\n}\n},\nmounted:function(){\nvarmyIcon=newBMap.Icon(&34;,newBMap.Size(40,50))\nmyIcon.setImageSize(newBMap.Size(40,50));\nthis.myIcon=myIcon;\nthis.points=initPoints();\n}\n})\n})\nfunctioninitPoints(){\nvarmyIcon=newBMap.Icon(&34;,newBMap.Size(40,50))\nmyIcon.setImageSize(newBMap.Size(40,50));\nvarmarker=[];\nmarker[0]=newBMap.Marker(newBMap.Point(118.082868,36.829153),{icon:myIcon});\nmarker[0].name=&34;;\nmarker[1]=newBMap.Marker(newBMap.Point(118.075933,36.830077),{icon:myIcon});\nmarker[1].name=&34;;\nmarker[2]=newBMap.Marker(newBMap.Point(118.067365,36.834728),{icon:myIcon});\nmarker[2].name=&34;;\nmarker[3]=newBMap.Marker(newBMap.Point(118.070112,36.83906),{icon:myIcon});\nmarker[3].name=&34;;\nmarker[4]=newBMap.Marker(newBMap.Point(118.0575,36.829644),{icon:myIcon});\nmarker[4].name=&34;;\nmarker[5]=newBMap.Marker(newBMap.Point(118.0564458,36.838945),{icon:myIcon});\nmarker[5].name=&34;;\nmarker[6]=newBMap.Marker(newBMap.Point(118.055272,36.833977),{icon:myIcon});\nmarker[6].name=&34;;\nmarker[7]=newBMap.Marker(newBMap.Point(118.042174,36.834829),{icon:myIcon});\nmarker[7].name=&34;;\nmarker[8]=newBMap.Marker(newBMap.Point(118.047978,36.830424),{icon:myIcon});\nmarker[8].name=&34;;\nfor(leti=0;i<marker.length;i++){\nmap.addOverlay(marker[i]);\n}\nreturnmarker;\n}\nfunctioninitMap(){\nmap=newBMap.Map(&39;);\nvarcenter=newBMap.Point(118.065728,36.818262);\nmap.centerAndZoom(center,15);\nmap.enableScrollWheelZoom();\n}
拓展：高德地图接口api
<!DOCTYPEhtml>\n<htmllang=&34;>\n\n<head>\n<metacharset=&34;>\n<metaname=&34;content=&34;>\n<metahttp-equiv=&34;content=&34;>\n<title>Document</title>\n<scriptsrc=&34;></script>\n<scripttype=&34;\nsrc=&34;></script>\n<!–异步版本ui组件,用于添加城市信息–>\n<scriptsrc=&34;></script>\n<!–<scriptsrc=&34;></script>–>\n<!–移动端开发时,添加以下内容–>\n<metaname=&34;content=&34;>\n</head>\n<style>\ncontainer1{\nwidth:600px;\nheight:480px;\n}\nplugins–>\n\n<!–选择城市教程\nhttps://lbs.amap.com/api/webservice/guide/api/district–>\n<divid=&34;></div>\n<divid=&39;>\n<div>\n<divclass=&39;>选择模式</div>\n<inputtype=&39;name=&39;value=&39;checked>拖拽地图模式</input>\n<!–</br>–>\n<inputtype=&39;name=&39;value=&39;checked>拖拽图标模式</input>\n</div>\n<div>\n<buttonid=&39;>开始选点</button>\n<buttonid=&39;>关闭选点</button>\n</div>\n<div>\n<divclass=&39;>选址结果</div>\n<divclass=&39;>经纬度:</div>\n<divid=&39;></div>\n<divclass=&39;>地址:</div>\n<divid=&39;></div>\n<divclass=&39;>最近的路口:</div>\n<divid=&39;></div>\n<divclass=&39;>最近的路:</div>\n<divid=&39;></div>\n<divclass=&39;>最近的POI:</div>\n<divid=&39;></div>\n</div>\n</div>\n<divid=&34;></div>\n<!–同步加载–>\n<!–<scripttype=&34;>\nvarmap=newAMap.Map(&39;,{\ncenter:[117.000231,36.456755],\nzoom:11\n})\n</script>–>\n\n<!–异步加载,推荐使用,异步加载指的是为jsAPI指定加载的回调函数,在jsAPI的主体资源加载完毕之后,将自动调用该回调函数.回调函数应该声明在JSAPI入口文件引用之前,异步加载可以减少其对其他脚本执行的阻塞,–>\n<scripttype=&34;>\n//varposition=newAMap.LngLat(116,39);//标准写法\n//varposition=[116,39];//简写,经纬度不能加引号\n\n//创建地图\n//如果不传入center坐标,会默认定位到所在城市,可以使用插件进行自动定位\nvarmap=newAMap.Map(&39;,{\n//center:[117.000000,38.000000],//设置地图中心点坐标\nzoom:14,//级别,级别与地图尺寸成正比,越大越详细,web最小为3级,高德最大为20\nviewMode:&39;,//设置地图的显示样式\nlang:&39;,//设置地图语言类型\nmapStyle:&39;,//设置地图的显示样式\n});\n//加载一个(不使用数组)或多个插件\nAMap.plugin([&39;,&39;,&39;,&39;],function(){\nvartoolbar=newAMap.ToolBar();//工具条,地图的缩放,平移\nmap.addControl(toolbar);\n//vardriving=newAMap.Driving();//驾车路线规划\n//driving.search(&34;)\n\n//ip定位\nvarcitySearch=newAMAP.citySearch()\ncitySearch.getLocalCity(function(status,result){\nif(status===&39;&&result.info===&39;){\n//查询成功,result为当前所在城市信息\n//result.bounds为当前所在经纬度,113.315606,34.536169\nif(result&&result.city&&result.bounds){\nvarcityinfo=result.city;\nvarcitybounds=result.bounds;\n//document.getElementById(&39;).innerHTML=&39;+result.bounds;\n//地图显示当前城市\nmap.setBounds(citybounds);\n}\n}else{\n//document.getElementById(&39;).innerHTML=result.info;\n}\n});\n\n});\n\n\n//加载ui模块,可以地图选点\n//&39;多个地图图层的组件\n//misc/PositionPicker选坐标的组件\nAMapUI.loadUI([&39;,&39;],function(PositionPicker){\n//如果使用ui组件,map则在ui组件里定义即可\nvarmap=newAMap.Map(&39;,{\nzoom:16,\nscrollWheel:false\n})\nvarpositionPicker=newPositionPicker({\nmode:&39;,\nmap:map,\niconStyle:{//自定义外观\nurl:&39;,\nancher:[24,40],\nsize:[48,48]\n}\n});\n\npositionPicker.on(&39;,function(positionResult){\ndocument.getElementById(&39;).innerHTML=positionResult.position;\ndocument.getElementById(&39;).innerHTML=positionResult.address;\ndocument.getElementById(&39;).innerHTML=positionResult.nearestJunction;\ndocument.getElementById(&39;).innerHTML=positionResult.nearestRoad;\ndocument.getElementById(&39;).innerHTML=positionResult.nearestPOI;\n});\npositionPicker.on(&39;,function(positionResult){\ndocument.getElementById(&39;).innerHTML=&39;;\ndocument.getElementById(&39;).innerHTML=&39;;\ndocument.getElementById(&39;).innerHTML=&39;;\ndocument.getElementById(&39;).innerHTML=&39;;\ndocument.getElementById(&39;).innerHTML=&39;;\n});\nvaronModeChange=function(e){\npositionPicker.setMode(e.target.value)\n}\nvarstartButton=document.getElementById(&39;);\nvarstopButton=document.getElementById(&39;);\nvardragMapMode=document.getElementsByName(&39;)[0];\nvardragMarkerMode=document.getElementsByName(&39;)[1];\nAMap.event.addDomListener(startButton,&39;,function(){\npositionPicker.start(map.getBounds().getSouthWest())\n})\nAMap.event.addDomListener(stopButton,&39;,function(){\npositionPicker.stop();\n})\nAMap.event.addDomListener(dragMapMode,&39;,onModeChange)\nAMap.event.addDomListener(dragMarkerMode,&39;,onModeChange);\npositionPicker.start();\n})\n\n//多个地图图层\nAMapUI.loadUI([&39;],function(BasicControl){\nvarlayerCtrl1=newBasicControl.LayerSwitcher({\nposition:&39;\n});\nvarmap1=newAMap.Map(&39;,{\n//这里将layerCtrl中启用的图层传递给map\nlayers:layerCtrl1.getEnabledLayers()\n});\nmap1.addControl(layerCtrl1);\nvarlayerCtrl2=newBasicControl.LayerSwitcher({\ntheme:&39;,\n//自定义基础图层\nbaseLayers:[{\nenable:true,//默认显示\nid:&39;,\nname:&39;,\nlayer:newAMap.TileLayer()\n},{\nid:&39;,\nname:&39;,\nlayer:newAMap.TileLayer.Satellite()\n}],\n//自定义覆盖图层\noverlayLayers:[{\nenable:true,\nid:&39;,\nname:&39;,\nlayer:newAMap.TileLayer.Traffic()\n},{\nid:&39;,\nname:&39;,\nlayer:newAMap.TileLayer.RoadNet()\n}]\n});\nvarmap2=newAMap.Map(&39;,{\n//这里将layerCtrl中启用的图层传递给map\nlayers:layerCtrl2.getEnabledLayers()\n});\nmap2.addControl(layerCtrl2);\n});\n\n\n\nmap.on(&39;,function(){\n//地图加载完成后触发complete事件\n})\n//map.destroy();//销毁地图,并清空地图容器\n\n\n\n</script>\n<scripttype=&34;\nsrc=&34;></script>\n<!–或者–>\n<!–<script>\nwindow.onLoad=function(){\nvarmap=newAMap.Map(&34;);\n}\nvarurl=&39;\nvarjsapi=document.createElement(&39;);\njsapi.charset=&39;;\njsapi.scr=url;\ndocument.head.appendChild(jsapi);\n</script>–>\n</body>\n\n</html>
两者的区别
1、对于使用者的主要区别：
高德注重导航的功能，
1、有很多路连名字都没有，但是高德依旧可以标记出来
用于骑行、徒步等低速运动，需要更详细地显示细节，高德地图则好于百度
2、高德语音提示比较全面，导航只听语音的话
百度注重生活的功能
1、实景功能三维效果逼真，方便用户能够精准的找出目的位置
2、商家服务对查找商家等
路线的优选
高德会给出路程最短的（省油，适合长图）
百度则有更多的考虑，包括避开拥堵路段（省时，适合城市里）
2、对开发者的主要区别：
百度地图：
网页版地图平台更好（Android、IOS、WEB）。
支持全景API
POI数据很丰富
缺点：api文档（烂的一批）
高德地图：
开发者人群的支持面更高，
平台适用性更好（Android、IOS、windowsphone、Win8、web）。
关于ip定位网站源码分享，ip地址定位网站的介绍到此结束，希望对大家有所帮助。