Say two words:
Preparatory work:
After getting the key, introduce the Gold API and UI component library and related CSS files on the page
<link rel= "stylesheet" href= "Http://cache.amap.com/lbs/static/main1119.css"/>
<script src= "Http://cache.amap.com/lbs/static/es5.min.js" ></script>
<script src= "Http://webapi.amap.com/maps?v=1.4.3&key=3853mark's key doesn't tell you 138eacc13d55806d&plugin= Amap.placesearch,amap.advancedinfowindow "></script>
<script src= "//webapi.amap.com/ui/1.0/main.js?v=1.0.11" ></script>
Displays the HTML and JS used by the underlying map
<body>
<div id= "Container" ></div>
</body>
<script type= "Text/javascript" >
var map = new Amap.map (' container ', {
Resizeenable:true,
Zoom:11,
Center: [116.397428, 39.90923]//default Map center by latitude
});
</script>
Introduction of the German Map toolkit js file
Write the HTML tags required for input prompts
<div>
<input id= "Tipinput" class= "Form-control input-style" placeholder= "Please enter the keyword" value= "/>
</div>
Enter the JS used by the cue and POI search plugin
Amap.plugin ([' Amap.autocomplete ', ' Amap.placesearch '],function ()} {
var autooptions = {
City: "Beijing",//cities, default national
Input: "keyword"//ID of input using Lenovo (that is, the unique ID above)
};
autocomplete= new Amap.autocomplete (autooptions);
var placesearch = new Amap.placesearch ({
City: ' Beijing ',
Map:map
})
AMap.event.addListener (AutoComplete, "select", Function (e) {
TODO implements its own functionality for the selected POI
Placesearch.setcity (E.poi.adcode);
Placesearch.search (E.poi.name)
});
});
...
Tips
How Web development uses the high-D map API (ii) to combine input hints and poi search plugins
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
