The map in this article uses Tu Map
Tuba Map online API address
http://union.mapbar.com/apidoc/
Offline CHM format download address:
http://union.mapbar.com/apidoc/chm/mapbarapi.rar
Rendering:
The Mapbar Map API allows you to embed Mapbar maps into your own web pages using JavaScript. The API provides many ways to interact with the map (as shown on the http://www.mapbar.com/localsearch/index.html page), as well as a set of services for adding content to the map, allowing you to You can create a stable map application on your own website.
Public test key:
http:// union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7sqT7AxaB0zdHZoZSWmbBsuT7JhMHTsMeD6ZIl9NzFsZHT=@JBL979@Iu7lJJZWWq0IDu9xZMzMxq7I9AhH7LAAA6hqzZHZZLTbZ ZauxlDz7C7DD9ZCFGT=
If you want to try Mapbar map, skip the step of applying for a key, Testing can be done locally (http://localhost) using the public test key.
There is a compatibility issue in Internet Explorer version 8.0. It is necessary to add the
tag between the tags of the web page to ensure the map The polyline function performs correctly.
Here is only the front-end source code
You need ajax to implement positioning persistence in your project
The code is as follows
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict .dtd">
Map Test</title> ; <BR><script type = "text/javascript" src = "http://union.mapbar.com/apis/maps/free?f=mapi&v=31.2&k=aCW9cItqL7..."></ script> <br><script type="text/javascript"> <br>var maplet=null;//Map object<br>var marker=null;//Marker object<br>var le=null;/ /Zoom level<br>var myEventListener=null;//Map click event handle<br>function initMap()//Initialization function<br>{ //Please indicate the source for reposting http://Qbit.cnblogs.com <br>le=10; //Default zoom level<br>maplet = new Maplet("mapbar"); <br>//Here you can initialize the map coordinates, such as reading from the database and then using a small script on the page<br>//For example: maplet.centerAndZoom(new MPoint(<%=dimension%>, <%=longitude%>),<%=zoom level%>); <br>maplet.centerAndZoom( new MPoint(116.38672, 39.90805), le);//Initialize the map center point coordinates and set the zoom level<br>maplet.addControl(new MStandardControl()); <br>} <br>function setp() <br> { <br>if (marker)//Determine whether the mark has been added<br>{ <br>alert("The mark has been added"); <br>return; <br>} <br>maplet.setMode(" bookmark");//Set to add mark mode<br>maplet.setCursorIcon("tb1.gif"); //Add mouse follow label<br>myEventListener = MEvent.bind(maplet, "click", this, addp ; >marker = new MMarker( point, //Coordinates<br>new MIcon("mark.gif", 24, 24), //Tag ICO (picture, size) <br>new MInfoWindow("Cai Ruifuzhuangheshi", "The best in history"), //Mark object <br>new MLabel("Cai Ruifu") //Small label <br>); <br>marker.bEditable=true; <br>marker.dragAnimation=true; <br>maplet.addOverlay(marker);//Add mark<br>marker.setEditable(true); //Set the mark editing state<br>maplet.setMode("pan"); //Set the map to drag( Normal) state<br>le= maplet.getZoomLevel(); //Get the current zoom level<br>document.getElementById("findp").style.display="block"; <br>document.getElementById("delp" ).style.display="block"; <br>document.getElementById("savep").style.display="block"; <br>MEvent.removeListener(myEventListener);//Logout event<br>} <br>} <br>//Find mark<br>function find(){ <br>maplet.centerAndZoom(marker.pt, le);//Locate mark<br>} <br>//Remove all markers<br>function del(){ <br>//Remove the set coordinates<br>maplet.clearOverlays(true); <br>location.reload(); //There is a bit of a bug when re-adding it. Here I am directly Refresh the page to reset <br>/*document.getElementById("findp").style.display="none"; <br>document.getElementById("delp").style.display="none"; <br> document.getElementById("savep").style.display="none"; <br>maplet=null; <br>marker=null; <br>myEventListener=null; <br>initMap();*/ <br> } <br>//Extract mark data<br>function savep() <br>{ <br>alert("Current coordinate point
Longitude:" marker.pt.lon "nDimension:" marker.pt.lat "nZoom level:" le); <br>} <br></script> <br></head> <br> <body onload="initMap()"> <br><table width="501"> <br><tr><td><input type="button" value="Add label" onclick="setp()"/></td> <br><td><input type="button" id="findp" value="View mark" style="display:none;" onclick ="find()"/></td> <br><td><input type="button" id="delp" value="Delete mark" style="display:none;" onclick= "del()"/></td> <br><td><input type="button" id="savep" value="save" style="display:none;" onclick="savep ()"/></td> <br></tr> <br><tr><td colspan="4"><div id="mapbar" style="width:500px ;height:300px"></div> <br></td></tr> <br></table> <br></body> <br></html> <br><br> <br>Source code download address: <br>http://xiazai.jb51.net/201004/yuanma/mapbar.rar<br><br>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="jquery study notes 1_jquery" href="https://m.php.cn/faq/22192.html">jquery study notes 1_jquery</a></span><span>Next article：<a class="dBlack" title="jquery study notes 1_jquery" href="https://m.php.cn/faq/22194.html">jquery study notes 1_jquery</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
