Recently in doing a website, you need to embed the location and information of the dealer. Search a lot of information, and finally completed the function, to share with you.
Map function: Zoom by ruler, mouse slide zoom, add callout and information.
Specific steps:
1: First to the Baidu Map API, apply for the key. (If there is no Baidu account to register a first)
2: Baidu Map API function to do more decentralized, such as labeling, scaling, etc. are required to find their own step-by-step code. I've sorted the code and copied it for you, which should be the simplest.
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.5&ak= Application Key" ></script>
<body>
<div style= "width:500px;height:500px;margin:0 auto" id= "Allmap" ></div>
<script type= "Text/javascript" >
var map = new Bmap.map ("Allmap");
var point = new Bmap.point (116.384, 39.987); Latitude and longitude of position to be marked
Map.centerandzoom (Point, 15); Center position and Zoom multiple
Map.enablescrollwheelzoom (); Add Scroll axis
Map.addcontrol (New Bmap.navigationcontrol ()); Add the ruler tool in the upper-left corner
Map.addcontrol (New Bmap.navigationcontrol ());
Map.addcontrol (New Bmap.scalecontrol ());
Map.addcontrol (New Bmap.overviewmapcontrol ());
Map.addcontrol (New Bmap.maptypecontrol ());
Map.setcurrentcity ("Beijing");
var opts = {
WIDTH:200,//Information window width
HEIGHT:20,//Information window height
Title: "Jiangxiang East Huating Home"/Info Window Caption
}
var Infowindow = new Bmap.infowindow ("xxx Company", opts); Creating an Information Window object
Map.openinfowindow (Infowindow, Map.getcenter ()); Open Information window
var marker = new Bmap.marker (point); Create a callout, a small red dot on a map
Map.addoverlay (marker);
</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
